Wie erzeuge ich einen sauberen CSS-Verlauf für eine Website?
CSS-Verlaufs-Generator - linear, radial, konisch - mit optionaler OKLCH-Interpolation (wahrnehmungsmäßig gleichmäßig) statt sRGB.
Hauptgewinn: OKLCH-Verläufe vermeiden den matschigen grauen Mittelpunkt, der in sRGB üblich ist - Blau→Gelb läuft in sRGB durch schlammiges Grau, in OKLCH durch sauberes Cyan/Grün.
Wähl den Typ, setz Stops und Winkel - bekomm fertigen CSS- und Tailwind-Code. Alles lokal.
So nutzt du das Tool
- Wähl einen Typ: Linear (Linie), Radial (vom Zentrum), Konisch (um einen Winkel, wie ein Ziffernblatt). Linear und Konisch haben einen 0-360°-Winkel-Schieberegler.
- Jeder Stop hat: Farbe (HEX, nativer Picker), Position 0-100%, X zum Entfernen. Klick "Stop hinzufügen" - der Generator setzt einen neuen in die größte Lücke. Max. 8 Stops.
- Wähl die Interpolation: sRGB (klassisch, manchmal matschige Mittelpunkte) oder OKLCH (perzeptuell, sauberer). Für Produktivarbeit OKLCH lassen.
- CSS und Tailwind aktualisieren sich live. Klick "Kopieren", um das Snippet zu greifen.
- Sechs Presets unten (Sunset, Ocean, Forest, Aurora, Ice, Mono) für einen Schnellstart.
Wann das hilfreich ist
Wo sich der Verlaufs-Generator auszahlt - typische Platzierungen:
- Hero-Sektionen - jede Landingpage braucht einen markanten Verlauf.
- Brand - ein Verlauf aus zwei Markenfarben = konsistenter Stil.
- App-Hintergründe - ein dezenter Verlauf lässt einfache UI premium wirken.
- Buttons - ein subtiler Radial-Verlauf beim Hover bringt Leben.
- Karten - konischer Verlauf als "Shimmer" (Ladezustand).
- E-Mail-Templates - HTML-E-Mail unterstützt Verläufe seit 2020.
- Designer, die zu OKLCH migrieren - vergleiche sRGB vs. OKLCH nebeneinander und sieh den Unterschied bei Verläufen aus Komplementärfarben (Blau→Gelb, Rot→Grün zeigen die Lücke am deutlichsten).
Fragen und Antworten
Weil Browser nativ zwischen Stops in sRGB interpolieren. Um einen perzeptuellen OKLCH-Effekt zu erzielen, fügen wir ~10 Zwischen-Stops pro Segment ein - der Browser interpoliert linear dazwischen und das Ergebnis ist praktisch identisch mit echter OKLCH-Interpolation. CSS Color Level 4 hat eine native "in oklch"-Syntax, aber der Support ist noch begrenzt (Chrome 113+, Safari 16.4+, Firefox 113+).