CSS Verlauf Generator
Kostenloser CSS-Verlauf-Generator: lineare, radiale, konische und Mesh-Verläufe mit Live-Vorschau. oklch-Modus, Tailwind-Export und 50+ Presets. Keine...
Aktualisiert Mai 2026
Geprüft von Rafael Duarte
⚙ Configuration
Gradient Type
Angle
Color Interpolation
background: linear-gradient(135deg, #197FE6 0%, #0EA5E9 100%);
Organize seus animes,
séries e filmes
em um só lugar.
Chega de três apps diferentes. Media tracker 100% em português, com alertas automáticos, feed social e salas de discussão.
+2.400 já na fila de espera
So funktioniert's
Vier Verlaufstypen, optionale perzeptuelle Farbinterpolation
1. Verlaufstyp wählen
Linear, radial, konisch oder Mesh — je nach gewünschtem Effekt.
2. Farbstopps festlegen
Regler auf der Leiste verschieben, Winkel über das Rad einstellen oder Gradzahl direkt eingeben.
3. Snippet kopieren
Zwischen reinem CSS, oklch, Tailwind v3 und Tailwind v4 wechseln und den fertigen Code mit einem Klick übernehmen.
Was dieses Tool kann
Alle vier Verlaufstypen, inklusive synthetisiertem Mesh
oklch-Modus
Perzeptuell gleichmäßige Farbinterpolation — beseitigt die graue "Dead Zone", die sRGB zwischen Komplementärfarben erzeugt.
Mesh-Gradient
Wird aus mehreren übereinandergelegten radial-gradient()-Schichten zusammengesetzt und erzeugt den "Aurora"-Look, den man aus modernem SaaS-Design kennt.
10 fertige Presets
Direkt mit einer Kombination wie Ocean, Aurora oder Rainbow starten, statt Farbstopps von Grund auf selbst zu justieren.
Export für Tailwind v3 und v4
Eine Funktion, die den meisten deutschen Farbverlauf-Generatoren wie webdesign-journal.de oder derkaufmann.at fehlt.
Vorschau in einer echten Landingpage
Den Verlauf innerhalb eines kompletten Hero-Section-Mockups sehen — Navbar, Badge, CTA und Social Proof — bevor überhaupt CSS kopiert wird.
Eigene Presets und PNG-Export
Bis zu 20 Kombinationen per Klick im Browser speichern oder den aktuellen Verlauf als PNG für Thumbnails exportieren.
Die vier CSS-Verlaufstypen
Wann du dieses Tool brauchst
Die häufigsten Einsatzszenarien unter Nutzern
Hero-Section-Hintergründe
Mesh- oder lineare Verläufe erzeugen visuelle Tiefe ohne zusätzliche Bilddateien — gut für die Core Web Vitals.
Hover-Zustände bei Buttons
Ein dezenter linearer Verlauf sorgt für mehr Tiefe, während background-color als Fallback erhalten bleibt.
Glassmorphism-Overlays
Radiale Verläufe mit Opacity-Stopps erzeugen den milchig-transparenten Glaseffekt, der in aktuellen UIs oft zu sehen ist.
Text mit Farbverlauf
Ein linear-gradient, per background-clip:text auf den Text zugeschnitten, macht Überschriften deutlich auffälliger.
Verlauf-Bibliothek fürs eigene Corporate Design
Markenfarben als persönliche Presets im Browser sichern und projektübergreifend wiederverwenden, ohne Hex-Codes erneut abzutippen.
Schnelles visuelles Brainstorming
Über den Zufalls-Button neue Farb- und Winkelkombinationen erzeugen, wenn die Inspiration für einen eigenen Entwurf fehlt.
Häufige Fehler
Fader Verlauf zwischen Komplementärfarben
sRGB erzeugt zwischen Blau und Gelb eine graue "Dead Zone" — den oklch-Modus aktivieren, um das zu vermeiden.
Annehmen, es gäbe eine native Funktion mesh-gradient()
Es gibt keine solche CSS-Funktion — Mesh wird aus mehreren radial-gradient()-Schichten zusammengesetzt.
-webkit-background-clip bei Verlaufstext vergessen
Wird zusätzlich zu background-clip:text benötigt, damit der Effekt auch in Safari korrekt dargestellt wird.
Zusätzliche Farbstopps beim Tailwind-v3-Export verlieren
Das from/via/to-Format von Tailwind v3 unterstützt nur drei Punkte — ab vier Farbstopps werden überzählige mittlere Stopps im Snippet verworfen. Für vollständige Erhaltung Tailwind v4 oder reines CSS verwenden.
Denken, radial, konisch oder Mesh ließen sich ebenfalls nach Tailwind exportieren
Der Tailwind-v3/v4-Export existiert nur für lineare Verläufe — die anderen drei Typen liefern ausschließlich reine CSS-Snippets.
Erwarten, dass gespeicherte Presets geräteübergreifend synchronisieren
Presets liegen ausschließlich im localStorage des aktuellen Browsers — Browserwechsel, Inkognito-Modus oder Löschen der Website-Daten entfernt die Liste unwiderruflich.
Warum diesen CSS-Verlauf-Generator nutzen
Unterstützt perzeptuelle Farbinterpolation über oklch sowie direkten Export nach Tailwind v3 und v4 — zwei Funktionen, die bei den meisten deutschsprachigen Alternativen wie webdesign-journal.de oder ToolSnak schlicht fehlen.
Der Mesh-Gradient-Generator baut den beliebten "Aurora"-Effekt aus modernem SaaS-Design automatisch zusammen, statt dass man radial-gradients manuell übereinanderlegen und Positionen selbst berechnen muss.
Neben dem reinen CSS lassen sich eigene Presets im Browser sichern, das Ergebnis als PNG exportieren und alles direkt in einem vollständigen Landingpage-Mockup begutachten — ganz ohne das Tool zu verlassen.
sRGB vs. oklch
Warum der Interpolations-Farbraum einen Unterschied macht
Häufig gestellte Fragen
Ein Tool, das fertigen CSS-Code für Farbverläufe erzeugt, den man direkt ins Stylesheet einfügen kann — Farben, Typ und Optionen auswählen, und man erhält gültiges CSS ohne es von Hand zu schreiben.
Weiterführende Ressourcen
Die maßgebliche Referenz für alle CSS-Verlaufstypen, auf Deutsch.
Die Spezifikation, die oklch und perzeptuelle Farbinterpolation in CSS eingeführt hat.
Browser-Kompatibilitätstabelle für konische Verläufe, hilfreich um Support vor dem Produktiveinsatz zu prüfen.
Verwandte Tools
- Farbkontrast-Prüfer Design Kostenloser Farbkontrast-Prüfer — WCAG 2.2 AA- und AAA-Konformität sofort prüfen. Live-Textvorschau, Farbenblindheit-Simulation und barrierefreie...
- Farbkonverter & Generator Design Farben zwischen HEX, RGB, HSL und CMYK sofort konvertieren. Kostenloser Online-Farbwähler mit WCAG-Kontrastprüfer und Palettengenerator.
- Farbpaletten-Generator Design Harmonische Farbpaletten aus jeder Basisfarbe generieren. Analogie, Komplementär, Triadisch oder Tetriadisch — als CSS-Variablen oder JSON exportieren.
- Farbpalette aus Bild Design Extrahiere Farbpaletten aus jedem Bild — erhalte HEX-, RGB-, HSL-Codes und exportiere als CSS-Variablen, Tailwind, JSON oder PNG. 100% clientseitig, kein...
- CSS Box Shadow Generator — Neumorphismus, Glasmorphismus & Tailwind Design Kostenloser CSS Box Shadow Generator mit Live-Vorschau. Erstelle Schatten, Neumorphismus- und Glasmorphismus-Effekte. Exportiere zu CSS, Tailwind oder CSS-Variablen.
