Eine Regel wie background-image: linear-gradient(90deg, #1e3a8a, #38bdf8) füllt die Fläche von links nach rechts: am linken Rand steht das dunkle Blau, am rechten das helle. Der Generator setzt genau diese Zeile aus zwei Hex-Farben, der Art des Verlaufs und dem Winkel zusammen und stellt ihr die einfarbige Ersatzzeile voran.
Erzeugt wird der einfache Fall mit zwei Farbstopps ohne Positionsangaben — der Verlauf, der in Kopfbereichen, Schaltflächen und Karten am häufigsten gebraucht wird. Mehrere Stopps, Prozentangaben dazwischen, repeating-linear-gradient und conic-gradient schreiben Sie danach von Hand; die Syntax bleibt dieselbe.
Der Winkel wird anders gezählt, als man erwartet
Gezählt wird ab der Richtung „nach oben“ und im Uhrzeigersinn: 0deg läuft von unten nach oben, 90deg von links nach rechts, 180deg von oben nach unten, 270deg von rechts nach links. Der Winkel benennt dabei die Richtung, in die der Verlauf zeigt — die erste Farbe liegt am gegenüberliegenden Rand.
Das ist nicht die Zählweise aus der Mathematik. Dort beginnt man an der positiven x-Achse und geht gegen den Uhrzeigersinn; wer das gewohnt ist, tippt 0deg, erwartet einen waagerechten Verlauf und bekommt einen senkrechten. Wem Gradangaben zu abstrakt sind, der schreibt statt der Zahl to right, to bottom oder to bottom right — CSS erlaubt beides, und die Schlüsselwörter lassen sich nicht falsch herum lesen.
Warum eine einfarbige Zeile davor gehört
Versteht ein Renderer den Verlauf nicht, verwirft er die ganze Deklaration — und die Fläche bleibt ohne Hintergrund, heller Text auf Weiß inklusive. Deshalb notiert man zusätzlich background-color mit einer einzelnen Farbe, üblicherweise eine Zeile davor: Die ungültige Verlaufszeile fällt weg, die Farbzeile bleibt stehen. Die Reihenfolge ist dabei bloße Gewohnheit, denn es sind zwei verschiedene Eigenschaften; die Farbe greift auch dann, wenn sie darunter steht. Wichtig ist etwas anderes — den Verlauf nicht in die Kurzform background schreiben, die setzt background-color mit zurück, und der Ersatz ist wieder weg. In heutigen Browsern ist das selten der Ernstfall; in E-Mail-Clients, bei der PDF-Ausgabe und in älteren eingebetteten Ansichten schon.
Als Ersatzfarbe nimmt der Generator die erste der beiden. Ob das die richtige Wahl ist, entscheidet der Text darauf: Steht heller Text auf dem Verlauf, muss auch die Ersatzfarbe dunkel genug bleiben, sonst ist die Seite ohne Verlauf zwar farbig, aber unlesbar. Den Kontrast prüft man deshalb gegen die dunkelste und die hellste Stelle, nicht gegen die Mitte.
Warum die Mitte grau wird
Ein Verlauf von Blau nach Gelb ist in der Mitte nicht bunt, sondern glatt grau — #0000ff und #ffff00 treffen sich exakt bei #808080. Der Grund ist die Interpolation: CSS mischt standardmäßig in sRGB, also schlicht rechnerisch zwischen den beiden Zahlentripeln. Liegen die Farben im RGB-Würfel einander gegenüber, mitteln sich ihre Kanäle zu einem neutralen Ton. Bei anderen weit auseinanderliegenden Paaren wird die Mitte nicht grau, aber stumpf und entsättigt: Blau nach Orange, #2563eb nach #f97316, trifft sich bei einem staubigen Mauve. Der Generator meldet den Fall im Hinweisfeld, wenn zwei kräftige Farben sich in der Mitte fast zu Grau ausgleichen.
Zwei Auswege. Entweder Sie setzen einen dritten Stopp in die Mitte, der die Sättigung hält — bei Blau nach Gelb etwa ein Grün oder ein kräftiges Türkis, je nachdem, welchen Weg der Verlauf nehmen soll. Oder Sie wechseln den Farbraum: linear-gradient(in oklch, #0000ff, #ffff00) mischt entlang eines wahrnehmungsnahen Raums und behält die Sättigung. Der Generator gibt die klassische Form ohne Farbraumangabe aus; das in oklch ergänzen Sie bei Bedarf selbst — ältere Browser verwerfen dann die ganze Deklaration samt Verlauf, was die einfarbige Zeile umso wichtiger macht.