CSS-Farbverlauf-Generator

Lineare, radiale und konische CSS-Verläufe mit OKLCH- oder OKLab-Mischung und sRGB-Fallback erstellen, als CSS, Tailwind oder SVG kopieren oder als PNG laden.

Läuft komplett in Ihrem Browser - Ihre Farbverläufe werden nirgendwohin hochgeladen.

Farbstopps

Klicken Sie auf die Leiste, um einen Stopp hinzuzufügen, und ziehen Sie einen Stopp, um ihn zu verschieben. Ist ein Stopp ausgewählt, verschieben ihn die Pfeiltasten und Entf entfernt ihn.

FarbeHexPosition (%)

Typ

Winkel (°)

Wiederholen

Vorlagen

Farben mischen in

Dieselben Stopps, auf drei Arten gemischt. Klassisches sRGB kann zwischen weit auseinanderliegenden Farben grau oder trüb werden; OKLab hält die Helligkeit gleichmäßig, OKLCH hält die Farbe kräftig. Browser, die OKLab oder OKLCH nicht kennen, erhalten einen sRGB-Fallback, der genauso aussieht.

Text darauf

Weißer Text: 2,1:1; Zu niedrig
Schwarzer Text: 4,2:1; AA nur für großen Text

Der niedrigste Kontrast an irgendeiner Stelle des Verlaufs. WCAG AA verlangt 4,5:1 für Fließtext und 3:1 für großen Text.

Code

Format

background: linear-gradient(90deg, #0077a3 0%, #1178a2 1.56%, #1b79a1 3.13%, #2a7b9f 6.25%, #367d9c 9.38%, #3f7f9a 12.5%, #608591 25%, #959179 50%, #ad956b 62.5%, #c59959 75%, #dd9c41 87.5%, #e99d2f 93.75%, #ef9d22 96.88%, #f29e19 98.44%, #f59e0b 100%);
background: linear-gradient(in oklab 90deg, #0077a3 0%, #f59e0b 100%);

Bildgröße

Gestalten Sie einen CSS-Farbverlauf nach Augenmaß und kopieren Sie Code, der überall funktioniert. Wählen Sie linear, radial oder konisch, ziehen Sie die Farbstopps und legen Sie fest, wie die Farben gemischt werden: Moderne Browser können in OKLab oder OKLCH mischen, was die graue tote Zone klassischer sRGB-Verläufe vermeidet, und der Code bringt einen passenden sRGB-Fallback für ältere Browser mit. Außerdem sehen Sie, ob weißer oder schwarzer Text darauf lesbar bleibt, und können eine Tailwind-Klasse, ein SVG oder ein PNG in beliebiger Größe exportieren.

Häufig gestellte Fragen

Was ist der Unterschied zwischen sRGB-, OKLab- und OKLCH-Verläufen?

Es sind verschiedene Arten, die Farben zwischen zwei Stopps zu berechnen. Klassische CSS-Verläufe mischen in sRGB, was ins Graue abrutschen (von Blau nach Gelb geht es über ein stumpfes Grau) oder in der Mitte dunkler werden kann. OKLab ist so konstruiert, dass gleiche Schritte auch gleich wirken, sodass die Mischung gleichmäßig hell bleibt. OKLCH mischt Helligkeit, Farbstärke und Farbton getrennt, läuft also um den Farbkreis herum und bleibt kräftig - von Rot nach Blau geht es über Lila statt über ein dunkles, trübes Mauve. Schreiben Sie „in oklab“ oder „in oklch“ in den Verlauf, um sie zu nutzen.

Funktioniert der OKLCH-Verlauf in jedem Browser?

Chrome und Edge 111+, Safari 16.2+ und Firefox 127+ verstehen „in oklch“ und „in oklab“. Für ältere Browser enthält der Code zwei „background“-Zeilen: Die erste ist ein einfacher sRGB-Verlauf mit zusätzlichen Zwischenstopps, sodass er fast gleich aussieht, die zweite ist die moderne. Browser überspringen die Zeile, die sie nicht verstehen, sodass jeder die beste Version bekommt, die er darstellen kann.

Wie nutze ich das mit Tailwind CSS?

Wählen Sie „Tailwind-Klasse“ und kopieren Sie sie: Es ist ein beliebiger Wert (Arbitrary Value) wie bg-[linear-gradient(in_oklab_90deg,_#0077a3_0%,_#f59e0b_100%)], bei dem Leerzeichen als Unterstriche geschrieben werden, wie Tailwind es erwartet. Fügen Sie sie in class ein - keine Konfiguration nötig.

Warum kann ich einen konischen Verlauf nicht als SVG herunterladen?

SVG kennt nur lineare und radiale Verläufe und kann einen radialen nicht so wiederholen wie CSS. Laden Sie in diesen Fällen ein PNG herunter: Es wird Pixel für Pixel mit derselben Mathematik berechnet und entspricht daher exakt dem CSS - in jeder gewünschten Größe.

Ist der Link zum Teilen privat?

Der Verlauf steht im Link hinter dem #, einem Teil, den Browser nie an einen Server senden, und die Seite wird vollständig in Ihrem Browser gezeichnet. Nichts wird hochgeladen, und der Verlauf wird nur auf diesem Gerät gespeichert, damit er noch da ist, wenn Sie zurückkommen.