CSS-Farbverlauf-Generator
Gestalte Verlaufshintergründe, indem du Farbstopps entlang einer Leiste ziehst, wähle den Typ (linear, radial oder konisch) und kopiere produktionsreifes CSS mit Fallback-Farbe und moderner OKLCH-Version ohne graue Übergänge.
Zu 100 % in deinem Browser verarbeitet
Ctrl + Enter ausführenCtrl + C Ergebnis kopieren
So funktioniert es
- 1Wähle den Verlaufstyp und passe Winkel oder Mittelpunkt an.
- 2Ziehe die Stopps entlang der Leiste; klicke auf die Leiste, um einen neuen hinzuzufügen.
- 3Wähle einen Stopp, um Farbe oder genaue Position zu ändern.
- 4Kopiere das CSS oder teile einen Link zu deinem Verlauf.
Anwendungsfälle
- Hintergründe für Hero-Bereiche, Karten und Buttons.
- Farbüberlagerungen auf Bildern.
- Tortendiagramme und Farbkreise mit conic-gradient.
- Markenfarben ausprobieren, bevor sie in Figma oder Code landen.
Häufig gestellte Fragen
Was ist der Unterschied zwischen linearem, radialem und konischem Verlauf?
Linear verläuft geradlinig in einem Winkel; radial breitet sich von einem Mittelpunkt als Kreis oder Ellipse aus; konisch dreht sich wie Uhrzeiger um einen Punkt und eignet sich für Tortendiagramme.
Was bringt die OKLCH-Interpolation?
Beim Mischen in sRGB wird die Mitte mancher Verläufe (z. B. Blau zu Gelb) gräulich. Mit OKLCH bleibt der Übergang kräftig. Das CSS enthält eine sRGB-Fallback-Zeile für ältere Browser.
Brauche ich Präfixe wie -webkit-?
Nein. linear-gradient, radial-gradient und conic-gradient funktionieren in allen aktuellen Browsern ohne Präfix. Zusätzlich ist eine einfarbige Fallback-Farbe enthalten.
Kann ich einen Verlauf teilen oder speichern?
Ja. Die Einstellungen stehen in der URL: Kopiere den Link mit „Teilen“, und jeder, der ihn öffnet, sieht genau denselben Verlauf.