Zum Inhalt springen
Musterli

CSS-Verlauf

Lineare, radiale und konische Verläufe mit sanften Übergängen in OKLCH. Als CSS, SVG oder Bild exportieren.

Generator öffnen

Läuft direkt in deinem Browser. Deine Grafiken entstehen auf deinem Gerät.

Beispielmotiv aus dem CSS-Verlauf

Mit einem Preset starten

Wähle ein Preset, es öffnet sich direkt im Editor. Dort passt du alles an.

Worum geht’s?

Ein CSS-Verlauf ist ein Farbübergang, den der Browser selbst zeichnet. Er braucht keine Bilddatei, lädt sofort und bleibt in jeder Grösse scharf. Der Generator mischt die Farben im Farbraum OKLCH, darum wirken Übergänge gleichmässig und ohne graue Mitte.

So geht’s

Wähle linear, radial oder konisch, lege deine Farben fest und stelle Winkel, Mittelpunkt und Übergang ein. Mit der Leertaste würfelst du neue Varianten. Kopiere am Schluss das CSS oder die Tailwind-Klassen, oder exportiere als SVG, PNG, JPG oder WebP.

CSS-Verlauf jetzt ausprobieren

Häufige Fragen

Warum OKLCH statt sRGB?
In sRGB laufen viele Farbpaare durch eine trübe, graue Mitte. OKLCH mischt nach wahrgenommener Helligkeit und Buntheit, darum bleiben Übergänge frisch. Für ältere Browser liefert das CSS zusätzlich einen sRGB-Verlauf als Rückfall.
Was machen die zusätzlichen Stopps?
Sie setzen Zwischenfarben entlang des Übergangs. So folgt der Verlauf der gewählten Kurve, etwa sanft hinein und heraus, statt linear zu laufen.
Kann ich den Verlauf in Tailwind verwenden?
Ja. Im Export findest du neben dem CSS auch fertige Tailwind-Klassen, die du direkt in dein Markup kopierst.
Sieht das exportierte Bild aus wie die Vorschau?
Ja. Für SVG und Bilder wird derselbe Verlauf als Vektorgrafik gezeichnet, in der Grösse, die du im Export wählst.

Fertige Farbverläufe

Über 30 eigene Verläufe mit CSS-Code zum Kopieren, jeder direkt im Editor anpassbar.

Zur Verlaufssammlung

Passende Generatoren

Alle Generatoren in Verläufe