CSS-Farbverlauf-Generator

Bauen Sie lineare, radiale oder konische Verläufe aus bis zu acht Farbstopps, kopieren Sie das CSS mit sRGB-Fallback und exportieren Sie PNG oder SVG.

CSS kopieren: So geht’s

1
Farben und Positionen der Stopps wählen
Beginnen Sie mit zwei Farbstopps und erweitern Sie auf bis zu acht. Für jeden Stopp tippen Sie einen Farbwert und eine Position in Prozent ein – so setzen Sie exakte Zahlen, statt einen Anfasser mit der Maus hin und her zu schieben.
2
Linear, radial oder konisch wählen
Legen Sie für einen linearen oder konischen Verlauf den Winkel fest, für einen radialen Form und Mittelpunkt, und bestimmen Sie, ob sich das Ganze wiederholt. Die Vorschau aktualisiert sich sofort.
3
CSS kopieren oder PNG herunterladen
Das CSS besteht aus zwei Deklarationen: einem sRGB-Fallback und der modernen interpolierten Fassung, die ihn überlagert. Denselben Verlauf können Sie auch als PNG in jeder Größe bis 4096 Pixel oder als SVG exportieren.

Warum in OKLCH interpolieren

Ein Verlauf von Blau nach Gelb in reinem sRGB läuft in der Mitte durch ein stumpfes Grau. Das ist kein Fehler Ihres Browsers: Werden die Kanäle Rot, Grün und Blau einzeln gemittelt, hebt sich die Buntheit genau dort auf, wo das Auge ein sauberes Grün erwartet. OKLCH ist ein wahrnehmungsbasierter Farbraum: Dieselben beiden Endpunkte ergeben dort eine Mitte, die gesättigt bleibt, und einen Verlauf, dessen Helligkeit gleichmäßig ansteigt. In modernem CSS lässt sich angeben, in welchem Farbraum interpoliert wird, etwa `linear-gradient(90deg in oklch, ...)`. Dieser Generator nutzt standardmäßig OKLCH; oklab, sRGB und HSL stehen bereit, wenn Sie die ältere Optik möchten.

Warum der Fallback wichtiger ist, als es scheint

Ein Browser, der `in oklch` nicht versteht, ignoriert nicht einfach dieses eine Wort, sondern verwirft die ganze Deklaration. Ohne Fallback entsteht dann kein leicht anderer Verlauf, sondern gar keiner, und die Hintergrundfarbe darunter scheint durch. Deshalb enthält das kopierte CSS immer zwei `background-image`-Zeilen. Die erste ist der Fallback: sechzehn Zwischenstopps, hier in Ihrem gewählten Farbraum berechnet und als einfache sRGB-Hexwerte ausgeschrieben. Sie bilden dieselbe Kurve so genau nach, dass die meisten Menschen keinen Unterschied sehen. Die zweite ist der moderne Einzeiler, den jeder Browser, der ihn versteht, darüberlegt.

Wiederholung und der Sonderfall konischer Verläufe

Ein sich wiederholender Verlauf reiht die Abfolge der Stopps immer wieder aneinander – das funktioniert nur, wenn der letzte Stopp unter 100 % liegt. Sonst bleibt nichts zum Wiederholen übrig, und das Ergebnis sieht genauso aus wie die einfache Fassung. Dieser Fall wird abgefangen, bevor Sie etwas kopieren. Konische Verläufe haben beim Export eine eigene Einschränkung: SVG 1.1 kennt überhaupt kein Element für konische Verläufe. Der SVG-Button meldet das deshalb und verweist Sie auf das PNG. Dieses wird aus 720 Keilen zu je einem halben Grad gezeichnet, damit das auch in älteren Safari-Versionen funktioniert.

Alles wird in diesem Tab berechnet

Farbinterpolation, CSS-Text, SVG-Markup und PNG entstehen vollständig lokal mit JavaScript und Canvas. Von Ihrem Verlauf wird nichts hochgeladen, und kein Bild wird zum Rendern irgendwohin geschickt. Schließen Sie den Tab, bleibt nichts zurück.

Häufige Fragen

Warum einen Farbverlauf in OKLCH interpolieren?

Weil die Interpolation in sRGB die Mitte eines Verlaufs zwischen weit auseinanderliegenden Farbtönen entsättigt – es entsteht ein grauer Streifen. OKLCH ist wahrnehmungsgleichförmig, daher behält die Mitte ihre Buntheit, und die Helligkeit steigt gleichmäßig an.

Wozu brauche ich die Fallback-Zeile?

Ein Browser, der die Syntax `in <space>` nicht unterstützt, verwirft die ganze Deklaration, nicht nur den unbekannten Teil. Der Fallback ist eine einfache sRGB-Annäherung, die zuerst steht – so erhalten auch diese Browser einen Verlauf.

Wie erstelle ich einen sich wiederholenden Farbverlauf?

Schalten Sie die Option „Abfolge der Farbstopps wiederholen“ ein und setzen Sie den letzten Stopp unter 100 %, zum Beispiel auf 20 %. Die Abfolge der Stopps wiederholt sich dann über das ganze Element. Steht der letzte Stopp auf 100 %, gibt es nichts zu wiederholen – das wird Ihnen gemeldet, statt dass Sie stillschweigend ein identisches Ergebnis erhalten.

Warum gibt es kein SVG für einen konischen Verlauf?

SVG 1.1 definiert nur lineare und radiale Verläufe; ein Element für konische gibt es nicht. Einen mit Hunderten Keilen nachzubauen ergäbe eine Datei, die niemand bearbeiten könnte. Deshalb wird der SVG-Export für konische Verläufe abgelehnt und stattdessen das PNG angeboten.

Kann ich einen Verlauf erstellen, der ins Transparente übergeht?

Ja. Verwenden Sie für den Stopp, der ins Transparente übergehen soll, eine Farbschreibweise mit Alphakanal, etwa einen achtstelligen Hexwert oder rgba(). Sowohl das CSS als auch das PNG behalten die Transparenz.

In welcher Größe sollte ich einen Hintergrund herunterladen?

Für einen bildschirmfüllenden Hintergrund reichen meist 1920 Pixel Breite, und Verläufe lassen sich sehr gut komprimieren. Mehr als 2048 Pixel lohnen sich nur für den Druck. Im Web nehmen Sie lieber das CSS: Es ist nur ein paar Hundert Byte groß und skaliert auf jede Größe.

Unterstützt Safari diese Farbverläufe?

Safari ab Version 16.4 versteht Interpolationsräume. Ältere Versionen greifen auf die sRGB-Zeile zurück – genau dafür ist sie da. Konische Verläufe in CSS unterstützt Safari ab 12.1, und der PNG-Export zeichnet sie als Keile, sodass auch ältere Versionen sie korrekt darstellen.