CSS-Verlaufsgenerator

Hier baust du einen Farbverlauf, siehst Farben und Richtung sofort in der Vorschau und nimmst am Ende die fertige background-Deklaration mit. Voreingestellt ist die Vorlage „Sonnenuntergang“ mit dem CSS background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);.

So benutzt du den Generator

1. Vorlagen: Klick eine der fünf an, Sonnenuntergang, Ozean, Bonbon, Monochrom oder Aurora, und nimm sie als Ausgangspunkt.
2. Typ: „Linear“, „Radial“ oder „Konisch“. Je nach Typ ändern sich die Optionen darunter.
3. Farbstopps: Hier legst du Farben und Positionen fest. Wie das im Einzelnen geht, steht im nächsten Abschnitt.
4. In OKLCH interpolieren (in oklch): Ist die Option an, werden die Farben im OKLCH-Farbraum miteinander verbunden.
5. CSS: Hier steht die Deklaration zu den aktuellen Einstellungen. Mit „CSS kopieren“ nimmst du sie mit.

Den Winkel tippst du ins Zahlenfeld oder stellst ihn mit dem Regler zwischen 0 und 360 ein. Das Zahlenfeld nimmt auch Werte über 360 und negative Werte an und schreibt sie unverändert ins CSS. Für den Mittelpunkt stehen neun Stellen zur Wahl: die Mitte, die vier Seiten und die vier Ecken.

Mit Farbstopps arbeiten

Ein Farbstopp (color stop) ist ein Punkt, der festlegt: An dieser Stelle gilt diese Farbe. Der Verlauf entsteht, indem die Strecken zwischen den Stopps gefüllt werden. Möglich sind 2 bis 8 Stopps.

• Ein Klick auf eine freie Stelle der Verlaufsleiste legt dort einen Stopp an. Er bekommt die Farbe, die an dieser Stelle gerade zu sehen war. Direkt nach dem Hinzufügen sieht der Verlauf deshalb aus wie vorher. Zieh den Stopp dann weiter oder gib ihm eine andere Farbe.
• Der Button „Stopp hinzufügen“ setzt einen weißen Stopp (#ffffff) in die Mitte zwischen dem letzten Stopp und 100 %. Liegt der letzte Stopp schon bei 100 %, kommt der neue in die Mitte der größten Lücke zwischen zwei Stopps, damit er ihn nicht überdeckt. Liegt je ein Stopp bei 0 % und bei 100 %, entsteht er bei 50 %.
• Zieh am Griff oder tipp eine Zahl ins Positionsfeld der Liste, um die Position zu ändern. Mit der Tastatur verschieben die Pfeiltasten einen Griff um 1 %, zusammen mit Umschalt um 10 %, und Entf löscht den Stopp.
• Die Buttons Nach oben und Nach unten in der Liste tauschen die Position mit dem benachbarten Stopp. Damit drehst du die Reihenfolge der Farben um.
• Entfernen geht nur, solange es mindestens 3 Stopps gibt.

Die Liste ist immer nach Position sortiert, und in dieser Reihenfolge stehen die Stopps auch im CSS. Positionen werden mit einer Nachkommastelle geschrieben.

Unterstützte Farbeingaben: Als Stoppfarbe gelesen werden HEX (3, 4, 6 oder 8 Stellen), Farbnamen, rgb(), hsl(), oklch() und transparent. Die Funktionen hwb(), lab(), lch() und color() sowie Variablen in var() werden nicht gelesen. Bei einer unlesbaren Farbe erscheint „Das ist keine CSS-Farbe, die dieses Tool lesen kann.“, und der betreffende Stopp fehlt in Vorschau und CSS. Gelesene Farben landen in genau der Schreibweise im CSS, in der du sie eingegeben hast.

Mit OKLCH-Interpolation ändert sich die Farbe in der Mitte

Ohne weitere Angabe mischt ein CSS-Verlauf, dessen Farben alle als HEX, Farbname, rgb() oder hsl() notiert sind, im sRGB-Farbraum: Die Werte für Rot, Grün und Blau der beiden Farben werden jeweils geradlinig ineinander überführt. Die empfundene Helligkeit verhält sich aber nicht proportional zu diesen Zahlen. Mischt man zwei Farben, die im Farbkreis weit auseinanderliegen, wird die Mitte deshalb dunkel und trüb. OKLCH führt Helligkeit (L), Buntheit (C) und Farbtonwinkel (H) getrennt und verbindet jeden der drei Werte für sich. Helligkeit und Buntheit brechen in der Mitte also nicht ein.

Setzt man zwei Stopps auf 0 % und 100 % und berechnet die Farbe bei 50 % der Leiste, ergibt sich:

Je weiter die Farbtöne auseinanderliegen, desto größer der Unterschied. Bei ähnlichen Farben wie in der Vorlage Sonnenuntergang ist er kaum vorhanden. Eines solltest du außerdem wissen: Bei OKLCH tauchen in der Mitte Farbtöne auf, die in keiner der beiden Ausgangsfarben stecken. Zwischen Rot und Grün ziehen zum Beispiel Orange und Gelb vorbei. Sollen zwei Farben auf direktem Weg ineinander übergehen, lässt du die Option besser aus.

Warum das kopierte CSS aus zwei Zeilen besteht

Die Syntax, mit der man wie bei in oklch die Interpolation festlegt, ist vergleichsweise spät zu CSS gekommen, und manche Browser verstehen sie nicht. Deshalb besteht die Deklaration bei eingeschalteter OKLCH-Interpolation aus zwei Zeilen. Für einen linearen Verlauf von Rot nach Grün sieht das so aus:

background: linear-gradient(90deg, #ff0000 0%, #ff3300 12.5%, #ff5600 25%, #ff7600 37.5%, #f99500 50%, #e3b200 62.5%, #c2ce00 75%, #8fe800 87.5%, #00ff00 100%);
background: linear-gradient(90deg in oklch, #ff0000 0%, #00ff00 100%);

• Die erste Zeile ist die Alternative. Die Strecke zwischen zwei benachbarten Stopps wird in 8 gleiche Teile zerlegt, und die 7 in OKLCH berechneten Zwischenfarben werden als gewöhnliche HEX-Stopps eingefügt. Aus 2 Stopps werden so 9, aus 3 werden 17.
• Die zweite Zeile ist die in oklch-Syntax selbst.

Wird dieselbe Eigenschaft zweimal deklariert, gilt die spätere. Ein Browser, der in oklch kennt, nimmt also die zweite Zeile. Einer, der es nicht kennt, ignoriert sie und bleibt bei der ersten.

Solange die OKLCH-Interpolation an ist, zeichnet die Seite Vorschau und Verlaufsleiste in jedem Browser nach dem Verfahren der ersten Zeile. Die Alternativzeile ist eine Näherung, bei der die Zwischenfarben auf den sRGB-Bereich gebracht und als HEX geschrieben sind. Was ein Browser aus der zweiten Zeile selbst zeichnet, kann farblich leicht davon abweichen. Kommt es auf die Farbe an, prüfe das Ergebnis nach dem Einfügen im Zielbrowser.

Was der Generator nicht kann

• Wiederholende Verläufe wie repeating-linear-gradient. Dafür setzt du im kopierten CSS repeating- vor den Funktionsnamen und passt den Bereich der Stopps von Hand an.
• Die Größe eines radialen Verlaufs (closest-side und ähnliche) und einen Mittelpunkt in Koordinaten wie at 30% 70%
• Hintergründe aus mehreren, durch Kommas getrennten Verläufen
• Stopp-Positionen in px statt in Prozent
• Andere Interpolationsarten wie in hsl oder in oklab