Wie benutzt du dieses Tool?
- Wähle linear, radial oder konisch und stelle den Winkel ein.
- Bearbeite die Farbstopps — Hex, RGB, Position. Hard-Stop-Button für scharfe Bänder.
- Kopiere die Ausgabe als Plain-CSS, Tailwind-v4-Utility, Inline-Style, SCSS-Mixin oder Inline-SVG.
Was macht der Gradient-Generator?
Der Generator baut CSS-Farbverläufe visuell: Du wählst zwischen linearem, radialem und konischem Verlauf, setzt Farbstopps mit beliebiger Position und entscheidest dich für den Interpolations-Farbraum. Die Live-Vorschau zeigt zwei Rechtecke nebeneinander — eines im aktuellen Farbraum, eines in sRGB zum Vergleich. So siehst du sofort, ob ein Verlauf in OKLCH tatsächlich satter durchläuft als in sRGB.
Die Ausgabe gibt es in fünf Formaten: Plain-CSS für klassische Stylesheets, eine Tailwind-v4-Utility-Klasse mit korrektem Color-Space-Modifier, ein Inline-Style-Attribut, einen SCSS-Mixin und ein Inline-SVG-Snippet für E-Mail-Templates. Jedes Format wird direkt im Browser generiert — kein Build-Tool, kein Roundtrip zu einem Server.
Warum ist der Farbraum bei Gradients so wichtig?
Beim Übergang zwischen zwei Farben muss der Browser dazwischenliegende Farbtöne berechnen. In sRGB entstehen dabei oft graue oder bräunliche „tote Zonen” zwischen kräftigen Komplementärfarben — etwa zwischen Blau und Gelb. Der Grund: sRGB ist kein wahrnehmungsgleichmäßiger Farbraum. Gleich große Zahlenabstände sehen für das Auge nicht gleich groß aus.
OKLCH (Oklab in Polar-Form, beschrieben in CSS Color Module Level 4) löst das Problem. Lightness (L) und Chroma (C) sind so kalibriert, dass eine konstante Sättigung über den Verlauf erhalten bleibt. Das gleiche Argument gilt für OKLab, das den gleichen Farbraum kartesisch beschreibt. HSL wirkt auf den ersten Blick wahrnehmungsgleichmäßig, fällt aber in dunklen und hellen Bereichen auseinander.
Wie funktioniert die A/B-Vergleichsvorschau?
Beide Vorschau-Rechtecke benutzen exakt dieselben Farbstopps und denselben Winkel — der einzige Unterschied ist der Wert in der CSS-Eigenschaft linear-gradient(in <space>, …). Links steht der gewählte Interpolations-Farbraum (Standard: OKLCH), rechts sRGB als Referenz. Wenn die Stopps ähnliche Hues haben, sind beide Rechtecke fast identisch. Sobald du komplementäre Farben kombinierst, kippt der sRGB-Verlauf in eine matschige Mitte, während OKLCH die Sättigung hält.
| Farbraum | Stärke | Schwäche |
|---|---|---|
| OKLCH | wahrnehmungsgleichmäßig, hue-stabil | etwas mehr Tipparbeit |
| OKLab | gleicher Raum, kartesisch | kein eigener longer hue-Modus |
| sRGB | universell, ältere Browser | „graue Zonen” bei Komplementär-Übergängen |
| HSL | intuitive Knöpfe (Hue/Sat/Light) | bricht im sehr Hellen/Dunklen |
Wie nutzt man Tailwind v4 Gradients richtig?
Tailwind v4 hat die Gradient-API gegenüber v3 deutlich erweitert. Die Richtungs-Utility heißt jetzt bg-linear-to-r (statt bg-gradient-to-r), und es gibt bg-radial, bg-radial-[<position>] sowie bg-conic und bg-conic-[<from>]. Farbstopps werden weiterhin mit from-, via- und to- gesetzt. Der entscheidende Unterschied: Tailwind v4 interpoliert standardmäßig in OKLab — also bereits in einem wahrnehmungsgleichmäßigen Raum, was 90 % der „graue Mitte”-Probleme automatisch behebt.
Wenn du einen anderen Farbraum brauchst (etwa OKLCH für Regenbogen-Effekte oder sRGB für Pixel-Genauigkeit), hängst du an die Richtungs-Utility einen Modifier an: bg-linear-to-r/oklch, bg-conic/hsl-longer, bg-radial/srgb. Dieser Modifier kompiliert dann zu linear-gradient(to right in oklch, …) im fertigen CSS (CSS Images-4 verlangt, dass Winkel und Color-Interpolation im selben Pre-Stop-Segment stehen, durch Leerzeichen getrennt, mit nur einem Komma vor den Farbstops). Der Tailwind-v4-Output dieses Tools hängt den Modifier automatisch dran, sobald du einen anderen Raum als sRGB wählst — sonst bekommst du nur die Richtung ohne Color-Space-Klausel.
Wozu Hard-Stops und wie baut man sie?
Ein Hard-Stop ist kein Verlauf, sondern ein scharfer Übergang an einer einzigen Position. Du erzeugst ihn, indem zwei Farbstopps an exakt derselben Prozent-Position landen — der Browser hat keinen Platz für eine Zwischenfarbe und schneidet hart. Damit baust du:
- Streifen-Hintergründe.
linear-gradient(90deg, #FF5733 0%, #FF5733 33%, #FFD166 33%, #FFD166 66%, #7C2D12 66%, #7C2D12 100%)ergibt drei gleich breite Bänder. - Loading-Bars. Ein Hard-Stop zwischen „gefüllt” und „leer” verschiebt sich animiert per Custom-Property.
- Decorative Bands. Skeleton-Loader oder Color-Block-Header für editorial Layouts.
Der „Harter Übergang”-Button neben jedem Stopp dupliziert den aktuellen Eintrag an derselben Position. Anschließend ziehst du eine der beiden Farben auf einen neuen Wert — der Übergang bleibt scharf.
Wie unterscheidet sich shorter hue von longer hue?
In polaren Farbräumen (OKLCH, HSL) liegen alle Hue-Werte auf einem Kreis. Zwischen zwei Hue-Punkten gibt es immer zwei Wege: den kurzen und den langen Bogen. CSS bietet vier Methoden: shorter hue (Standard, kürzer), longer hue (länger), increasing hue (wachsend mod 360) und decreasing hue (fallend mod 360).
Für die meisten Verläufe ist shorter hue richtig — du willst nicht, dass ein Blau-Grün-Übergang plötzlich durch Rot läuft. Für konische Gradients, die einen Regenbogen-Spinner oder ein Color-Wheel rendern sollen, brauchst du jedoch longer hue, weil der „kurze” Weg sonst nur einen schmalen Hue-Bogen abdeckt. Der „Hue-Richtung”-Schalter im Tool aktiviert sich automatisch, sobald du auf konisch oder OKLCH wechselst.
Welche Anwendungsfälle gibt es?
Hero-Backgrounds. Ein subtiler linearer Verlauf von Off-White zu warmem Akzent gibt Landing-Pages Tiefe, ohne ablenkend zu wirken. OKLCH hält die Sättigung über den Verlauf — keine Grau-Mitte zwischen Marken-Orange und Sandfarbe.
Karten-Highlights. Radiale Gradients positionieren einen weichen Lichtschein hinter Karten — ideal für Hover-States oder Aufmerksamkeits-Akzente. Mit radial-gradient(circle closest-side, …) bleibt das Highlight zentriert.
Loading-Spinners. Konische Gradients mit longer hue und einer Alpha-fadenden zweiten Stop-Position bilden Lade-Bögen — von vollem Akzent bis transparent. Animiert per CSS rotate() rotiert das Ganze gleichmäßig.
Design-System-Tokens. Der SCSS-Mixin-Output verpackt den Gradient als wiederverwendbaren Token. Komponenten konsumieren @include app-gradient;, und beim Wechsel des Interpolations-Farbraums änderst du nur den Mixin — alle Verbraucher übernehmen das stillschweigend.
E-Mail-Templates. Outlook und ältere Gmail-Browser-Views rendern CSS-Gradients oft nicht. Der Inline-SVG-Snippet ist universeller — <linearGradient> in SVG wird von jedem Mail-Client unterstützt, der Bilder zulässt.
Häufige Fragen
Wie erstellt man einen CSS-Gradient?
Im Browser-Editor öffnen, Gradient-Typ wählen (linear, radial, konisch), Winkel einstellen und Farbstopps anlegen. Der CSS-Code generiert sich live mit. Kopier-Button überträgt das Snippet in dein Stylesheet.
Was ist OKLCH und warum besser als RGB?
OKLCH ist ein wahrnehmungsgleichmäßiger Farbraum. Beim Interpolieren zwischen zwei Farben entsteht keine graue Zwischenzone wie in sRGB — der Verlauf bleibt sichtbar gesättigt. Das A/B-Vorschau-Fenster zeigt den Unterschied direkt.
Wie nutze ich Gradients in Tailwind v4?
Tailwind v4 stellt bg-linear-to-r, bg-radial, bg-conic und Hilfsklassen from-, via-, to- bereit. Standard-Interpolation ist OKLab — mit dem Modifier /oklch oder /hsl lässt sich der Farbraum explizit setzen.
Funktionieren CSS-Gradients in E-Mails?
Viele E-Mail-Clients (Outlook, ältere Gmail-Modi) rendern linear-gradient() nicht. Das Tool liefert deshalb auch einen Inline-SVG-Snippet als Fallback — SVG-<linearGradient> läuft in fast allen Mail-Clients zuverlässig.
Was ist ein Hard-Stop in einem CSS-Gradient?
Zwei Farbstopps an derselben Position erzeugen einen harten Übergang ohne Verlauf. Daraus baut man Streifen, Loading-Bänder oder Color-Block-Hintergründe. Der „Harter Übergang”-Button dupliziert den ausgewählten Stopp.
Was bedeutet longer hue bei einem konischen Gradient?
Polare Farbräume (OKLCH, HSL) bieten zwei Wege um den Farbkreis: shorter hue (kürzer) und longer hue (länger). Für Regenbogen-Spinner und Color-Wheels nimmt man longer hue — sonst lässt der Browser den Bogen springen.
Speichert das Tool meine Farbpaletten?
Nein. Alle Eingaben bleiben im Browser-Tab, nichts wird gespeichert oder hochgeladen. Beim Neuladen ist das Tool leer. Wer Paletten sichern will, kopiert den Output in das eigene Stylesheet oder einen Design-Token.
Welche Browser unterstützen OKLCH?
OKLCH ist CSS Color Module Level 4 und seit Chrome 111, Firefox 113 und Safari 16.4 (alle 2023) verfügbar. Das deckt rund 95 % der weltweiten Browser ab. Ältere Engines fallen lautlos zurück — der Fallback-Hex-Stopp bleibt sichtbar.
Welche Farb-Tools sind verwandt?
Weitere Tools für CSS-Authoring und Farbpflege:
- Hex zu RGB Konverter — Hex-Codes in RGB, HSL und OKLCH umwandeln.
- Kontrast-Prüfer — WCAG-AAA-Kontrast zwischen zwei Farben prüfen.
- SVG-Optimierer — SVG-Output verkleinern, ohne Qualitätsverlust.
- CSS-Formatter — Rohes oder minifiziertes CSS sauber formatieren.
Zuletzt aktualisiert: