Farben & Design
CSS-Gradient-Generator
Den Verlauf nach Augenmaß gestalten, das CSS mit einem Klick kopieren.
Ein guter Farbverlauf gibt einem Hintergrund, einem Button oder einer Hero-Sektion Tiefe – doch die richtigen Farben und den richtigen Winkel findet man nur durch Probieren. Dieser Editor lässt Sie visuell komponieren: Fügen Sie zwei bis fünf Farbstopps hinzu, positionieren Sie jeden präzise, stellen Sie den Winkel des linearen Verlaufs ein oder wechseln Sie in den radialen Modus. Die Vorschau füllt den gesamten Rahmen und aktualisiert sich bei jeder Anpassung – genau so, wie Ihr Browser das Ergebnis rendern wird. Passt alles, kopiert ein Klick die komplette CSS-Deklaration (background: linear-gradient(…)), bereit zum Einfügen in ein Stylesheet, eine Komponente oder eine HTML-E-Mail. Ohne Konto – alles läuft in Ihrem Browser.
Wie funktioniert es?
- Wählen Sie den Verlaufstyp: linear oder radial.
- Fügen Sie Ihre Farben hinzu (2 bis 5 Stopps) und positionieren Sie sie.
- Stellen Sie den Winkel ein und justieren Sie mit der Vollbild-Vorschau nach Augenmaß.
- Kopieren Sie das erzeugte CSS in Ihr Stylesheet.
Häufige Fragen
Linear oder radial – wo liegt der Unterschied?
Ein linearer Verlauf verläuft entlang einer Geraden im gewählten Winkel – ideal für Hintergründe und Buttons. Ein radialer Verlauf strahlt vom Zentrum nach außen – perfekt für Halo- und Spotlight-Effekte.
Wie gelingt ein dezenter, eleganter Verlauf?
Bleiben Sie bei benachbarten Tönen auf dem Farbkreis und halten Sie den Helligkeitsunterschied klein: Zwei nah beieinanderliegende Farbtöne schlagen fast immer einen Regenbogen. Ein Winkel von 135° ergibt eine natürliche Diagonale.
Funktioniert der erzeugte Code überall?
Ja – linear-gradient() und radial-gradient() werden von allen aktuellen Browsern ohne Präfixe unterstützt. Nur einige ältere E-Mail-Clients ignorieren sie; hinterlegen Sie dort eine Hintergrundfarbe als Fallback.