CSS-Verlaufsgenerator
Erstelle lineare, radiale und konische CSS-Verläufe mit mehreren Farbstopps und kopiere den Code.
background: —;
Alles läuft in deinem Browser – kein Upload, keine Anmeldung.
Über CSS-Verlaufsgenerator
Der CSS-Verlaufs-Generator erstellt lineare, radiale und konische Verläufe mit voller visueller Kontrolle. Fügen Sie Farbstopps durch Klicken auf die Verlaufsleiste hinzu, ziehen Sie sie zur Neupositionierung, und geben Sie jedem Stopp seine eigene Farbe, Deckkraft und Position. Lineare Verläufe erhalten eine Winkelsteuerung; radiale eine Form (Kreis oder Ellipse) und Position; konische einen Startwinkel.
Die Live-Vorschau zeigt genau, was der Browser rendern wird, und eine Zufallsschaltfläche sowie eine Auswahl kuratierter Vorlagen sind da, wenn Sie einen Ausgangspunkt statt einer leeren Fläche brauchen. Stopps können frei hinzugefügt und entfernt werden — ein Verlauf braucht lediglich mindestens zwei.
Wenn es passt, kopieren Sie den reinen Verlaufswert oder eine komplette CSS-Regel. Der Generator läuft vollständig in Ihrem Browser ohne Upload und ohne Anmeldung und ist damit ein schneller Begleiter für Buttons, Hero-Hintergründe, Rahmen und Texteffekte.
So verwenden Sie CSS-Verlaufsgenerator
- Wählen Sie den Verlaufstyp: linear, radial oder konisch.
- Legen Sie den Winkel (linear), die Form und Position (radial) oder den Startwinkel (konisch) fest.
- Klicken Sie auf die Verlaufsleiste, um Farbstopps hinzuzufügen, und ziehen Sie sie in Position.
- Geben Sie jedem Stopp seine Farbe, Deckkraft und exakte Position.
- Probieren Sie die Vorlagen oder die Zufallsschaltfläche für schnelle Inspiration.
- Kopieren Sie den Verlaufswert oder die vollständige CSS-Regel.