Erstelle lineare, radiale und konische Verläufe mit unbegrenzten Stops, OKLCH-bewusster Interpolation und Tailwind v4 Utility-Ausgabe. Live-Vorschau, 30+ Presets, in deinem Browser.
Linear blendet entlang einer geraden Linie in einem gewählten Winkel (0° = nach oben, 90° = nach rechts). Radial blendet von einem Mittelpunkt nach außen — Kreis oder Ellipse, mit Größenschlüsselwörtern wie farthest-corner. Konisch rotiert um einen Mittelpunkt — Color Stops sitzen in Winkeln wie Uhrzeiger. Konisch eignet sich hervorragend für Tortendiagramme, Zifferblätter und synthetische color-wheel-Hintergründe.
Beim Übergang zwischen Farbtönen, die nicht analog sind — z. B. Blau → Gelb oder Rot → Grün. Die Standard-sRGB-Interpolation läuft durch einen matschigen Graubereich; OKLCH (CSS Color Module 4 in oklch) hält den Mittelpunkt lebendig, weil in einem perzeptiv gleichmäßigen Raum interpoliert wird. Bei Zwei-Stop-Verläufen zwischen ähnlichen Farbtönen ist der Unterschied klein. Bei Multi-Stop- oder Verläufen mit weitem Farbtonbereich ist OKLCH dramatisch besser.
Linear / radial / konisch, OKLCH-glatt, Tailwind-bewusst — und ein paar kleine Details, die das Arbeiten damit richtig Spaß machen.
Linear mit Winkel 0–360°, radial mit Kreis/Ellipse + Größe + Position, konisch mit Startwinkel + Position. Alle erzeugen standardkonforme Syntax nach CSS Images Module Level 4.
Stops an beliebigen Prozentwerten hinzufügen, mit dem Positions-Slider feinjustieren, auf das Farbfeld klicken, um eine Farbe zu wählen oder einen HEX-Wert einzufügen. Stops werden in der Ausgabe automatisch sortiert. Klicke auf das ×, um einen zu entfernen (mindestens 2 Stops).
Wechsle zwischen Standard-sRGB und moderner in oklch-Interpolation. OKLCH liefert perzeptiv glattere Mittelpunkte — keine matschigen Graubänder bei großen Farbtonsprüngen. Fällt auf Browsern, die CSS Color 4 noch nicht unterstützen, sauber zurück.
Drei Ausgabebereiche aktualisieren sich live: rohes CSS (background-image: linear-gradient(...)), Tailwind v4 Arbitrary-Value-Utility (bg-[linear-gradient(...)]) und ein JSON-Design-Token-Snippet, bereit für Style Dictionary oder Figma Tokens.
Sunset, Ocean, Aurora, Cyber, Royal, Neon Pink, Iris, Bullseye, Conic Wheel — anklicken, um zu laden und anzupassen. Jedes Preset ist ein produktionsreifer Ausgangspunkt, nicht nur ein Name.
Vorschau gerendert mit nativem background-image — was du siehst, ist genau das, was dein Stylesheet erzeugt. Jeder Pixel läuft lokal — öffne DevTools → Network und überprüfe null ausgehende Requests.
Vier Schritte vom leeren Blatt zu produktionsreifem CSS, Tailwind oder JSON.
Linear für Hintergründe, Header, Hero-Bereiche. Radial für Spotlights, Vignetten, leuchtende Buttons. Konisch für Tortendiagramme, Farbräder und trendige synthetische Hintergründe. Wechsle mit den Tabs zwischen den Typen — deine Color Stops bleiben über den Wechsel hinweg erhalten.
Klicke auf das Farbfeld, um einen Picker zu öffnen, oder füge einen HEX-Wert direkt ins Feld ein. Ziehe den Slider, um die Position des Stops auf 0–100 % zu setzen. Klicke + Stop hinzufügen, um an der größten Lücke einen neuen Stop einzufügen (mit einer Mittelpunktfarbe). Insgesamt bis zu 12 Stops.
Bei linear setzt du den Winkel (0° zeigt nach oben, 90° nach rechts). Bei radial wählst du Form, Größenschlüsselwort und Mittelpunktposition. Bei konisch setzt du den Startwinkel. Stelle die Farbinterpolation auf OKLCH für perzeptiv glatte Mittelpunkte über mehrfarbige Verläufe hinweg.
Drei Bereiche aktualisieren sich live: CSS (background-image:...), Tailwind v4 (bg-[...]), JSON (Design-Token-Form). Verwende das Kopier-Icon an jedem Bereich oder klicke auf CSS herunterladen, um eine gradient.css-Datei zu speichern, die direkt in ein Projekt eingebunden werden kann.
Vier häufige Szenarien, in denen ein Privacy-First-Browser-Tool besser ist als Figma + eine separate Gradient-Seite zu öffnen.
Wähle ein Preset nahe an deiner Marke, lege deine zwei Markenfarben in die Stops, wechsle für einen sauberen Mittelpunkt zur OKLCH-Interpolation. Kopiere das CSS, füge es in das Stylesheet deines Hero ein. Gesamte Zeit: unter 2 Minuten.
Erstelle einmalig einen 3-Stop-Markenverlauf, kopiere ihn als JSON-Design-Token, füge ihn in Style Dictionary / Figma Tokens ein. Jetzt verwendet jeder Button und jede Card auf jeder Plattform denselben Verlauf per Referenz. An einer Stelle aktualisieren, überall propagiert.
Synthetische konische Verläufe sind perfekt für Tortendiagramm-Visuals, Fortschrittsanzeigen oder „Daten-laden“-Shimmer-Zustände. Wähle den konischen Typ, setze den Startwinkel, platziere Stops an den richtigen Prozentwerten — die Mathematik bildet Winkel 0–360° exakt auf Prozentpositionen ab.
Erstelle den Verlauf, setze das Seitenverhältnis passend zu deinem Ziel (16:9 für Slides, 1:1 für IG, 3:1 für X-Header), erstelle einen Screenshot der Vorschau. Oder kopiere das CSS in eine einmalige HTML-Datei und mache im Browser einen Screenshot in der exakt benötigten Pixelgröße.
Deine Farben und Verläufe verlassen niemals dein Gerät. Öffne DevTools → Network und du siehst null ausgehende Requests bei jeder Operation.
background-image — der gerenderte Verlauf entspricht also exakt dem, was dein Stylesheet in den Browsern deiner Nutzer produzieren wird.
Handverlesene Lektüre zu CSS-Gradients, OKLCH-Interpolation und Design-Token-Systemen.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Linear blendet entlang einer geraden Linie in einem gewählten Winkel (0° = nach oben, 90° = nach rechts). Radial blendet von einem Mittelpunkt nach außen — Kreis oder Ellipse, mit Größenschlüsselwörtern wie farthest-corner. Konisch rotiert um einen Mittelpunkt — Color Stops sitzen in Winkeln wie Uhrzeiger. Konisch eignet sich hervorragend für Tortendiagramme, Zifferblätter und synthetische color-wheel-Hintergründe.
Beim Übergang zwischen Farbtönen, die nicht analog sind — z. B. Blau → Gelb oder Rot → Grün. Die Standard-sRGB-Interpolation läuft durch einen matschigen Graubereich; OKLCH (CSS Color Module 4 in oklch) hält den Mittelpunkt lebendig, weil in einem perzeptiv gleichmäßigen Raum interpoliert wird. Bei Zwei-Stop-Verläufen zwischen ähnlichen Farbtönen ist der Unterschied klein. Bei Multi-Stop- oder Verläufen mit weitem Farbtonbereich ist OKLCH dramatisch besser.
Eine Arbitrary-Value-Utility, die du direkt in JSX / Blade / HTML einfügen kannst: bg-[linear-gradient(45deg,#ff6b6b_0%,#feca57_50%,#ff9ff3_100%)]. Keine Änderungen an tailwind.config.js nötig; funktioniert in jedem Tailwind 4 Projekt. Wenn du benannte Farb-Tokens bevorzugst, kopiere stattdessen das CSS und konvertiere von Hand.
Lineare und radiale Verläufe werden seit 2014 universell unterstützt. Konische Verläufe sind seit 2021 in allen Evergreen-Browsern verfügbar. Das Schlüsselwort in oklch wird in Chrome 111+, Safari 16.2+, Firefox 113+ unterstützt. Wenn du ältere Browser unterstützen musst, verwende die Standard-sRGB-Interpolation — der visuelle Unterschied ist vor allem bei Multi-Stop-Verläufen mit großen Farbtonsprüngen relevant.
Nein. Das Erzeugen des Gradient-Strings, die CSS-/Tailwind-/JSON-Serialisierung und die Live-Vorschau laufen alle als JavaScript auf deinem Gerät. Öffne DevTools → Network und du siehst null ausgehende Requests bei jeder Operation. Markenfarben einfügen, interne Tokens — nichts verlässt deinen Laptop.