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.
Bitte Adblocker deaktivieren
Diese Werkzeuge sind komplett kostenlos und werden ausschließlich über Werbung finanziert. Mit aktivem Adblocker stehen die Tools leider nicht zur Verfügung.
2. Diese Seite neu laden
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.