CSS-Gradient-Generator
Linear-, Radial- und Conic-Verläufe mit mehreren Farbstopps visuell erstellen und als CSS oder Tailwind-Code kopieren.
Der CSS-Gradient-Generator erstellt lineare, radiale und konische Farbverläufe visuell. Du verschiebst Farbstopps per Ziehen, stellst Winkel, Position und Deckkraft ein und wählst optional die Farbmischung in OKLCH. Fertig sind der CSS-Code sowie die Tailwind-Klasse als arbitrary value oder, bei einfachen Verläufen, als Utility.
Farbstopps
background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%);Farbverläufe in CSS
CSS kennt drei Verlaufstypen, die als Hintergrundbild eingesetzt werden: linear-gradient, radial-gradient und conic-gradient. Jeder besteht aus einer Richtung
oder Position und einer Liste von Farbstopps.
| Typ | Verlauf | Typischer Einsatz |
|---|---|---|
| linear | Entlang einer Linie im Winkel | Hintergründe, Buttons, Overlays |
| radial | Vom Mittelpunkt nach außen | Spotlights, Glow, Vignetten |
| conic | Um einen Mittelpunkt herum | Farbkreise, Tortendiagramme |
So gehst du vor
- Vorlage laden oder Typ wählen.
- Stopps ziehen, Farben und Deckkraft einstellen.
- Code kopieren. Verläufe mit vielen Farbpunkten baust du im Mesh-Gradient-Generator, passende Farben findest du im Farbpaletten-Generator.
Beispiel
Für einen Hero-Bereich nimmst du linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%). Liegt Text darüber, prüfst du den Kontrast mit dem Farbkontrast-Prüfer an der hellsten Stelle.
Häufige Fragen
Was ist der Unterschied zwischen linear, radial und conic?
Ein linearer Verlauf läuft entlang einer Geraden in einem Winkel, ein radialer von einem Mittelpunkt nach außen und ein konischer wie ein Farbkreis um einen Mittelpunkt. Konisch eignet sich für Tortendiagramme und Farbräder.
Was bringt die Farbmischung in OKLCH?
Standardmäßig mischt CSS in sRGB, dabei entstehen oft graue, matte Mitten zwischen kräftigen Farben. Mit „in oklch“ bleiben Verläufe lebendiger und gleichmäßiger. Die Syntax wird von aktuellen Browsern unterstützt, ältere zeigen eine Ersatzdarstellung.
Wie erzeuge ich harte Kanten im Verlauf?
Setze zwei Farbstopps an dieselbe Position, zum Beispiel Blau bei 50 % und Gelb bei 50 %. Es entsteht eine scharfe Linie statt eines weichen Übergangs.
Wie nutze ich den Verlauf in Tailwind?
Einfache lineare Verläufe mit zwei oder drei Farben lassen sich mit Utilities wie bg-linear-to-r from-[…] to-[…] bauen (Tailwind v4). Für alles andere nimmst du die arbitrary value bg-[linear-gradient(…)], die in v3 und v4 funktioniert.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.