Zum Inhalt springen
Dogu SangjaWerkzeugkastenAlle Tools

CSS-VerlaufsgeneratorBeta

Baue lineare, radiale und konische Verläufe visuell und kopiere das fertige CSS. Optionale OKLCH-Interpolation hält Zwischentöne kräftig statt trüb.

Vorlagen

Typ
deg

Farbstopps

Klick auf die Leiste, um dort einen Stopp hinzuzufügen, und zieh einen Griff, um ihn zu verschieben. Mit der Tastatur verschieben die Pfeiltasten einen Stopp um 1 % (mit Umschalt um 10 %), und Entf entfernt ihn.

%
%

CSS

background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);

Statt dir die linear-gradient(...)-Syntax zu merken und jedes Mal von Hand zu tippen, baust du den Hintergrundverlauf hier visuell und kopierst das fertige CSS.

Verlaufsarten und Syntax

  • Linear (linear-gradient): Ein einzelner Winkel legt die Richtung fest. 90deg verläuft von links nach rechts, 180deg von oben nach unten.
  • Radial (radial-gradient): Breitet sich von einem Mittelpunkt nach außen aus. Du wählst eine Form (Kreis oder Ellipse) und einen Mittelpunkt.
  • Konisch (conic-gradient): Die Farben laufen im Uhrzeigersinn um einen Mittelpunkt. Du wählst einen Startwinkel und einen Mittelpunkt.

Alle drei nutzen eine Liste von Farbstopps. Jeder Stopp besteht aus einer Farbe und einer Position (0–100 %), und dieses Tool lässt dich 2 bis 8 davon hinzufügen, entfernen und neu anordnen. Du kannst einen Stopp auch verschieben, indem du seinen Griff auf der Verlaufsleiste ziehst, oder mit einem Klick an der gewünschten Stelle der Leiste einen hinzufügen.

Warum OKLCH-Interpolation trübe Zwischentöne vermeidet

Ein CSS-Verlauf mischt standardmäßig die Rot-, Grün- und Blauwerte zweier Farben geradlinig im sRGB-Farbraum. Das Problem: Die wahrgenommene Helligkeit verläuft nicht proportional zu diesen Zahlen. Mischt man also zwei Farben, die im Farbkreis weit auseinanderliegen, sackt die Helligkeit in der Mitte ab, und der Verlauf wirkt dort trüb oder fast grau.

  • Rot (#ff0000) zu Grün (#00ff00): Die sRGB-Mitte ist ein stumpfes Oliv (#808000), die OKLCH-Mitte liegt eher bei einem kräftigen Orange.
  • Blau (#0000ff) zu Gelb (#ffff00): Die sRGB-Mitte ist fast Grau (#808080), die OKLCH-Mitte liegt eher bei einem kräftigen Türkis.

OKLCH trennt Helligkeit (L), Buntheit (C) und Farbton (H) auf eigene Achsen, sodass sich der Farbton viel leichter verschieben lässt, während die Helligkeit konstant bleibt — die Mitte bleibt dadurch kräftig. Aktiviere die Option „In OKLCH interpolieren“ in diesem Tool, um genau diese Berechnung in Vorschau und CSS zu sehen.

Browserunterstützung und die Ausweichlösung

Eine Syntax zur Angabe der Interpolationsmethode wie in oklch ist relativ neu in der CSS-Spezifikation, ältere Browser erkennen sie also möglicherweise nicht. Wenn OKLCH-Interpolation aktiviert ist, schreibt dieses Tool beim Kopieren des CSS zwei Zeilen:

  1. Eine Ausweichzeile, die überall gleich aussieht, mit den in OKLCH berechneten Farben, aufgeteilt in viele einfache sRGB-Stopps
  2. Eine Zeile mit der echten in-oklch-Syntax

Wird dieselbe Eigenschaft (background) zweimal deklariert, wendet CSS die später stehende an — ein Browser, der in oklch versteht, nutzt also die zweite Zeile, alle anderen automatisch die erste. Da sich die tatsächliche Unterstützung laufend weiterentwickelt, lohnt sich bei wichtigen Projekten ein direkter Blick auf die eigene Zielbrowser-Liste.

Quellen

Häufige Fragen

Was genau ändert sich, wenn ich „In OKLCH interpolieren (in oklch)“ aktiviere? Ist das schon sicher nutzbar?

Ein CSS-Verlauf mischt zwei Farben standardmäßig geradlinig im sRGB-Farbraum. Mit in oklch wird stattdessen im OKLCH-Farbraum gemischt, wodurch die Mitte kräftiger bleibt. Beim Kopieren des CSS schreibt dieses Tool zwei Zeilen: zuerst eine Alternative, die in jedem Browser gleich aussieht (die in OKLCH berechneten Farben, aufgeteilt in viele einfache sRGB-Stopps), danach die echte in-oklch-Syntax. Da bei CSS die später deklarierte Regel derselben Eigenschaft gewinnt, verwenden Browser, die in oklch verstehen, die zweite Zeile, alle anderen automatisch die erste. Deshalb kannst du es einfügen.

Warum sieht der mit OKLCH interpolierte Zwischenton anders aus als erwartet?

Ein Verlauf von Rot zu Grün landet bei sRGB-Interpolation in der Mitte bei einem stumpfen Oliv (#808000). Dieselben zwei Farben in OKLCH interpoliert, landet die Mitte eher bei einem kräftigen Orange. Von Blau zu Gelb ist die sRGB-Mitte fast Grau (#808080), während die OKLCH-Mitte eher zu einem kräftigen Türkis tendiert. sRGB mischt Zahlen auf eine Art, die nicht der wahrgenommenen Helligkeit entspricht — mischt man zwei Farben, die im Farbkreis weit auseinanderliegen, sackt die Helligkeit in der Mitte ab und wirkt trüb oder grau. OKLCH trennt Helligkeit von Farbton, sodass sich der Farbton verschieben lässt, während die Helligkeit gleich bleibt — die Mitte bleibt kräftig.

Kann ich mehr als 2 Farbstopps hinzufügen?

Ja. Dieses Tool unterstützt 2 bis 8 Stopps. Die Schaltfläche „Stopp hinzufügen“ setzt einen neuen Stopp auf halbem Weg zwischen dem letzten Stopp und 100 %. Klickst du auf die Verlaufsleiste, entsteht an dieser Stelle ein Stopp in der Farbe, die dort gerade zu sehen ist. Die Position (%) jedes Stopps änderst du, indem du seinen Griff auf der Leiste ziehst oder eine Zahl eingibst.

Lassen sich damit auch wiederholende Verläufe wie repeating-linear-gradient erzeugen?

Nein. Dieses Tool erzeugt nur linear-gradient, radial-gradient und conic-gradient. Für eine wiederholende Variante nimmst du das erzeugte CSS, setzt das Präfix repeating- vor den Funktionsnamen und passt die Stopp-Positionen an das gewünschte Wiederholungsintervall an.

Kann ich das erzeugte CSS einfach so einfügen?

Ja. Der Button „CSS kopieren“ kopiert eine background-Deklaration (bei ausgeschaltetem OKLCH) oder zwei (bei eingeschaltetem). Hat das Element bereits eine andere Hintergrundfarbe oder ein Hintergrundbild, achte darauf, dass die kopierte Zeile danach steht, damit am Ende wirklich der Verlauf angewendet wird.

Verwendete Open-Source-Software: culori (MIT)