@@Sebastian:

nuqneH

Das Layout weißt sowohl auf der rechten und linken Seite sowie im Head-Bereich einen weißen Rand auf, den ich nicht weg bekomme.

Rechts und links? Ich dachte, das soll so.

Oben ist es der Außenabstand des ersten Kindelements (bzw. eines seiner Nachfahren).

Fürs erste Kindelement wäre er bspw. wegzubekommen mit

body>*:first-child  
{  
  margin-top: 0;  
  padding-top: 1em;  
}

Vorzugsweiswe aber: Im Allgemeinen bekommt man den Abstand auch weg, wenn man dem Body noch oben einen Rahmen gibt und diesen aus dem Viewport schiebt:

body  
{  
  border-top: 1px solid;  
  top: -1px;  
}

(Relativ positioniert ist der Body ja schon.)

Hier nochmal der gesamte Code mit deinen Veränderungen:
body::before, body::after
{
        width: 50px;
}

body::before
{
        left: -30px;
}

body::after
{
        right: -30px;
}

Hey, die Zahlenwerte sollten schon übereinstimmen.

Ich hatte glatt übersehen, dass bei schmalen Viewport wegen des rechten Gradienten ein horizontaler Scrollbalken erscheint, den gilt es natürlich zu vermeiden.

Ich glaube, dein Vorhaben verlangt nach Media-Queries: Die Gradienten links und rechts werden nur dann erzeugt, wenn der Viepowrt breit genug ist.

Qapla'