CSS-Verlaufsgenerator

Erstellen Sie lineare, radiale und konische Verläufe mit Live-Vorschau und kopierfertigem CSS. Passen Sie Stopps, Winkel und Formen an und fügen Sie sie dann in Ihr Stylesheet ein.

CSS Gradient Generator

Live

Type

Angle135°

Stop 1

Stop 2

Third color stopStop 3

CSS output

background: linear-gradient(135deg, #c026d3 0%, #fb923c 50%, #f43f5e 100%);

Key capabilities

Erstellen Sie lineare, radiale und konische Verläufe mit Live-Vorschau und kopierfertigem CSS.
Läuft in Ihrem Browser
Kostenlose Nutzung

Anleitung

Wählen Sie den Verlaufstyp und den Winkel oder die Position.
Farbstopps hinzufügen oder bearbeiten.
Kopieren Sie das generierte CSS.

How this tool works

Wählen Sie den Verlaufstyp und den Winkel oder die Position.
Farbstopps hinzufügen oder bearbeiten.
Kopieren Sie das generierte CSS.

Recommended settings

Verwenden Sie zunächst die Standardoptionen und passen Sie sie dann bei Bedarf an

Supported formats

Text / on-page input

File size and limits

Sehr komplexe mehrschichtige Vorschauen wirken sich auf älteren Telefonen möglicherweise langsamer aus.

Privacy

Farb- und CSS-Generatoren laufen vollständig in Ihrem Browser. Vorschauen und Konvertierungen laden Ihre Stile niemals hoch.

Common use cases

Verwenden Sie den CSS-Verlaufsgenerator, wann immer Sie ihn brauchen: Erstellen Sie lineare, radiale und konische Verläufe mit Live-Vorschau und kopierfertigem CSS.

Troubleshooting

Die Vorschau sieht nach dem Einfügen anders aus

Überprüfen Sie Ihre Seite auf konkurrierendes CSS (Zurücksetzungen, geerbte Farben). Kopieren Sie die generierte Regel zunächst in ein isoliertes Stylesheet.

FAQ

Lädt dies mein CSS hoch?

Nein. Generatoren und Konverter laufen in Ihrem Browser mit Live-Vorschau.

Brauche ich ein Konto?

Nein. Öffnen Sie das Tool, passen Sie die Steuerelemente an und kopieren Sie das CSS.