Verlaufsgenerator.

Lineare, radiale oder konische CSS-Verläufe mit Live-Vorschau erstellen. Farben und Richtung anpassen, dann CSS kopieren.

0%
100%

          
        

Wählen Sie einen Verlaufstyp (linear, radial oder konisch), fügen Sie Farbstopps hinzu, passen Sie deren Positionen an und sehen Sie das Ergebnis live. Das generierte CSS ist bereit zum direkten Einfügen in Ihr Projekt.

Anleitung

Wählen Sie den Verlaufstyp, passen Sie den Winkel an, klicken Sie auf Farbfelder und ziehen Sie Regler. Klicken Sie auf + Farbe hinzufügen für weitere Stopps. Kopieren Sie das CSS aus dem dunklen Codeblock rechts.

Beispiele

Sonnenuntergang linear (135°) linear-gradient(135deg, #ee6c4d 0%, #3859d5 100%)
Radialer Glanz radial-gradient(circle, #ffffff 0%, #3859d5 100%)
Konisches Farbrad conic-gradient(from 0deg, #ee6c4d, #3859d5, #1f8a5b, #ee6c4d)

FAQ

Was ist ein konischer Verlauf?

Ein konischer Verlauf dreht Farben um einen Mittelpunkt. Nützlich für Tortendiagramme, Farbräder und Zifferblatteffekte – überall dort, wo Farbe kreisförmig statt linear verläuft.

Wie viele Farbstopps kann ich hinzufügen?

So viele Sie möchten – klicken Sie auf + Farbe hinzufügen für weitere Stopps. Das CSS ist unabhängig von der Anzahl der Stopps gültig.

Ähnliche Werkzeuge

Datenschutz und Datenverarbeitung

Dieses Werkzeug läuft vollständig in Ihrem Browser. Nichts, was Sie eingeben oder einfügen, wird an einen Server gesendet — die gesamte Verarbeitung erfolgt lokal auf Ihrem Gerät.