CSS-Gradient-Generator
Lineare und radiale CSS-Gradienten mit Live-Vorschau bauen.
Linear oder radial wählen, Winkel-Slider ziehen, Farbstopps mit Prozent-Positionen bearbeiten. Live-Vorschau aktualisiert, CSS einen Klick entfernt.
background: linear-gradient(135deg, #0a7cff 0%, #a855f7 100%);
So funktioniert's
Linear oder radial wählen
Linear hat einen Winkel; radial zentriert auf dem Element.
Farbstopps bearbeiten
Auf eine Swatch klicken für die Farbe; Prozent-Position einstellen. Mit Buttons hinzufügen/entfernen.
CSS kopieren
Die `background:`-Deklaration ist bereit zum Einfügen.
Was ist das?
Ein CSS-Gradient-Generator baut die linear-gradient(...)- oder radial-gradient(...)-Funktionszeichenkette aus einer Liste von Farbstopps. Jeder Stopp hat Farbe und Position; CSS interpoliert zwischen aufeinanderfolgenden Stopps. Die Ausgabe ist eine einzelne `background:`-Deklaration.
Wann verwenden
Hero-Hintergründe, Button-Highlights, Karten-Hintergründe, illustrative Trenner, Brand-Systeme mit subtiler Tiefe ohne Bild, Dunkelmodus-Akzente.
Häufige Fehler
Zu viele Farbstopps zu eng beieinander - der Gradient wirkt überladen. Voll gesättigte Komplementärfarben (Rot/Grün) bei je 50% - perzeptuelle Mitte matschig, ausser man fügt einen neutralen Zwischenpunkt ein. Und Fallback-`background-color` vergessen.
FAQ
- Warum wirkt mein Gradient streifig?
- CSS-Gradienten werden in sRGB linear interpoliert, was zwischen zwei gesättigten Farben einen matschigen dunklen Mittelbereich ergeben kann. Verwende die OKLCH-Syntax (linear-gradient(in oklch, ...)) für perzeptuell gleichförmige Gradienten in modernen Browsern.