Verlaufsgenerator
Erstellen Sie CSS-Verläufe (linear und radial) visuell und kopieren Sie den CSS-Code.
100 % privat — alles läuft in Ihrem Browser
So funktioniert's
- 1
Wählen Sie Linear oder Radial — lineare Verläufe lassen sich zusätzlich im Winkel von 0° bis 360° einstellen.
- 2
Wählen Sie die Farbe jedes Stopps und stellen Sie die Position per Schieberegler ein (0–100 %).
- 3
Fügen Sie bis zu acht Stopps hinzu oder entfernen Sie nicht benötigte.
- 4
Kopieren Sie das erzeugte CSS und fügen Sie es in Ihr Stylesheet ein.
Beispiele
Blau zu Violett (Standard)
Eingabe
Linear · 135° · #3B82F6 0% → #8B5CF6 100%Ausgabe
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);Radialer Verlauf mit drei Stopps
Eingabe
Radial · #F59E0B → #EF4444 → #8B5CF6Ausgabe
background: radial-gradient(circle, #F59E0B 0%, #EF4444 50%, #8B5CF6 100%);Häufige Fragen
Was ist der Unterschied zwischen linearen und radialen Verläufen?
Ein linearer Verlauf mischt Farben entlang einer geraden Linie im eingestellten Winkel; ein radialer Verlauf strahlt von der Mitte nach außen.
Welche Browser unterstützen das erzeugte CSS?
Alle modernen Browser unterstützen standardmäßige linear-gradient() und radial-gradient() — keine Herstellerpräfixe nötig.
Wie viele Farbstopps kann ich verwenden?
Bis zu acht. Jeder Stopp hat eine eigene Farbe und einen Positionsregler von 0 % bis 100 %.