CSS-Farbverlauf-Generator

Dieser CSS-Farbverlauf-Generator baut lineare und radiale Verläufe (Gradients) aus Farbstopps, die du selbst steuerst: mit Live-Vorschau und einer background-Deklaration zum direkten Einfügen. Ziehe die Stopps entlang der Leiste, stelle Winkel oder Form ein, und der CSS-Code aktualisiert sich sofort.

Alles läuft in deinem Browser mit den Farben und Einstellungen, die du wählst. Nichts wird hochgeladen, und du kannst das Ergebnis kopieren und offline verwenden.

Ein linearer Verlauf mischt Farben entlang einer geraden Linie, und der Winkel bestimmt die Richtung: 0 Grad zeigt nach oben, 90 Grad nach rechts, 180 Grad nach unten. Ein radialer Verlauf mischt von der Mitte nach außen, als Kreis oder Ellipse.

Beide sind Standard-CSS-Werte, geschrieben als linear-gradient() und radial-gradient(), und beide nutzen dieselbe Liste von Farbstopps. Wenn du den Typ wechselst, bleiben deine Farben erhalten, nur die Ausbreitung ändert sich.

Jeder Farbstopp ist eine Farbe an einer Position von 0 % bis 100 %. Der Verlauf mischt weich zwischen benachbarten Stopps, die Position eines Stopps bestimmt also, wo seine Farbe am stärksten ist und wie schnell sie in die nächste übergeht.

Füge so viele Stopps hinzu, wie du für mehrfarbige Verläufe brauchst, ziehe sie für den Feinschliff, oder klicke auf die Leiste, um einen neuen Stopp genau dort zu setzen. Zwei Stopps sind das Minimum für einen Verlauf.

Kopiere den erzeugten Code und füge ihn als background eines beliebigen Elements ein, zum Beispiel einer Section, Karte oder eines Buttons. Moderne Browser unterstützen linear-gradient und radial-gradient ohne Vendor-Prefix, der Wert funktioniert also unverändert.

Weil ein Verlauf nur ein Wert ist, kannst du ihn überall einsetzen, wo ein Hintergrundbild erwartet wird, ihn über eine Volltonfarbe als Fallback legen oder dieselben Stopps für eine lineare und eine radiale Variante wiederverwenden, für einen einheitlichen Look.