CSS-Verlaufsgenerator

Gestalten Sie lineare und radiale CSS-Verläufe mit Live-Vorschau. Fügen Sie Farbstopps hinzu, legen Sie den Winkel fest und kopieren Sie sauberes background-CSS – alles direkt in Ihrem Browser.

Vorschau

Verlauf

Winkel

90°

Farbstopps

#f5530c

#ffa94d

CSS

background: linear-gradient(90deg, #f5530c 0%, #ffa94d 100%);

So verwenden Sie CSS-Verlaufsgenerator

1
Verlaufstyp wählen
Wechseln Sie zwischen Linear und Radial. Bei einem linearen Verlauf legen Sie die Richtung zusätzlich mit dem Winkelregler fest, gemessen in Grad.
2
Stopps hinzufügen und einfärben
Klicken Sie auf ein Farbfeld, um jede Farbe zu wählen, und legen Sie ihre Position von 0 bis 100 Prozent fest. Nutzen Sie „Farbstopp hinzufügen“ für mehrfarbige Übergänge oder entfernen Sie einen Stopp, um es zu vereinfachen.
3
Live-Vorschau ansehen
Das Vorschaufeld zeigt Ihren Verlauf genau so, wie er im Browser dargestellt wird, und aktualisiert sich bei jeder Änderung, die Sie vornehmen.

4
CSS kopieren
Kopieren Sie die generierte background-Zeile und fügen Sie sie in Ihr Stylesheet ein. Es ist Standard-CSS, das in jedem modernen Browser funktioniert.

Häufig gestellte Fragen

Wie erstelle ich einen CSS-Verlauf?

Wählen Sie linear oder radial, legen Sie den Winkel fest und fügen Sie so viele Farbstopps hinzu, wie Sie möchten. Die Vorschau aktualisiert sich live, und das fertige CSS erscheint darunter als background-Eigenschaft, die Sie direkt in Ihr Stylesheet kopieren können.

Was ist der Unterschied zwischen einem linearen und einem radialen Verlauf?

Ein linearer Verlauf mischt Farben entlang einer geraden Linie, und Sie steuern seine Richtung über den Winkel in Grad. Ein radialer Verlauf verläuft kreisförmig von der Mitte nach außen. Beide nutzen dieselben Farbstopps – nur die Form des Übergangs ändert sich.

Was sind Farbstopps?

Ein Farbstopp ist eine Farbe zusammen mit einer Position von 0 bis 100 Prozent entlang des Verlaufs. Zwei Stopps ergeben einen einfachen Übergang zwischen zwei Farben, während weitere Stopps satte, mehrfarbige Verläufe ermöglichen. Ändern Sie den Positionswert, um zu verschieben, wo jede Farbe sitzt.

Wie verwende ich den Verlauf in meinem Projekt?

Kopieren Sie die generierte Zeile und fügen Sie sie als background-Eigenschaft eines beliebigen Elements ein, etwa eines div oder einer section. Da es reines CSS ist, funktioniert es in jedem modernen Browser – ganz ohne Bilder oder Bibliotheken.

Werden meine Daten auf einen Server hochgeladen?

Nein. Alles läuft vollständig in Ihrem Browser. Nichts von dem, was Sie erstellen, wird hochgeladen, protokolliert oder gespeichert, sodass Ihre Arbeit vollkommen privat bleibt und das Tool sogar offline weiterarbeitet.

CSS-Verlaufsgenerator

So verwenden Sie CSS-Verlaufsgenerator

Häufig gestellte Fragen

Verwandte Tools