Farbverläufe bauen und als CSS kopieren.
Kombiniere beliebig viele Farbstopps zu einem linearen oder radialen Verlauf, stelle Winkel und Positionen ein und sieh das Ergebnis sofort in der Live-Vorschau. Das fertige CSS gibt es mit einem Klick zum Kopieren — alles läuft im Browser.
1 Typ
2 Winkel
3 Farben
CSS-Gradients: linear und radial
Ein CSS-Farbverlauf (linear-gradient oder radial-gradient) füllt einen Hintergrund weich von einer Farbe zur nächsten — ganz ohne Bild. Jeder Farbstopp hat eine Farbe und eine Position in Prozent; beim linearen Verlauf bestimmt der Winkel die Richtung. Dieses Werkzeug baut den Verlauf visuell zusammen und erzeugt das passende CSS. Es wird nichts hochgeladen — alles entsteht lokal im Browser.
Häufige Fragen
Wie binde ich den Verlauf ein?
Kopiere die erzeugte Zeile und setze sie als background auf dein Element, z. B. .hero{ background: linear-gradient(135deg, #… ); }.
Wie viele Farben sind möglich?
Von zwei bis sechs Farbstopps. Über „+ Farbe" fügst du weitere hinzu, über das „×" entfernst du einzelne wieder.
Wird etwas hochgeladen?
Nein. Der Verlauf und das CSS entstehen komplett lokal in deinem Browser.