CSS-Verlaufsgenerator
Erstellen Sie visuell einen linearen oder radialen CSS-Verlauf und kopieren Sie das fertige CSS – direkt in Ihrem Browser.
🔒 Lokal in Ihrem Browser verarbeitet
Loading…
So funktioniert's
- Wählen Sie Linear oder Radial als Verlaufstyp. Bei linearen Verläufen ziehen Sie den Regler oder geben einen Wert ein, um den Winkel in Grad festzulegen.
- Jeder Farbstopp hat ein Farbmuster und eine Position (0-100 %). Klicken Sie auf ein Muster, um eine Farbe zu wählen, oder geben Sie eine Position ein, um diesen Stopp entlang des Verlaufs zu verschieben.
- Verwenden Sie „Stopp hinzufügen“, um bis zu 5 Farbstopps hinzuzufügen, oder „Entfernen“ neben einem Stopp, um ihn zu löschen (mindestens 2 Stopps sind erforderlich).
- Das Vorschaufeld über der CSS-Ausgabe aktualisiert sich live, sobald Sie eine Einstellung ändern — kein Klick auf eine Schaltfläche nötig.
- Klicken Sie auf Kopieren, um die generierte CSS-Deklaration zu kopieren, bereit zum Einfügen in Ihr Stylesheet.
Funktionen
- Unterstützt sowohl lineare (mit einstellbarem Winkel) als auch radiale Verläufe
- Bis zu 5 Farbstopps, jeweils mit eigener Farbe und Position
- Live-Vorschaufeld, das sich bei jeder Änderung sofort aktualisiert
- Kopieren per Klick der fertigen CSS-Deklaration
- 100 % clientseitig — Ihr Verlauf verlässt niemals Ihren Browser
Häufig gestellte Fragen
Sendet dieses Tool meinen Verlauf irgendwohin?
Nein. Der Verlauf wird vollständig mit lokalem JavaScript und CSS erstellt und angezeigt — nichts wird jemals hochgeladen oder an einen Server gesendet.
Wie viele Farbstopps kann ich hinzufügen?
Bis zu 5 Stopps. Da mindestens 2 Stopps für einen sinnvollen Verlauf nötig sind, wird die Schaltfläche „Entfernen“ deaktiviert, sobald nur noch 2 übrig sind.
Hat der Winkel-Regler eine Wirkung bei radialen Verläufen?
Nein. Radiale Verläufe strahlen in diesem Tool immer als Kreis von der Mitte nach außen aus, daher gilt der Winkel nur für lineare Verläufe.
Was passiert, wenn zwei Stopps dieselbe Position haben?
Das ist erlaubt und kann gezielt genutzt werden, um eine scharfe Farbkante statt eines weichen Übergangs zu erzeugen — beide Stopps bleiben im generierten CSS erhalten.
Kann ich die Ausgabe direkt in meine CSS-Datei einfügen?
Ja. Das Ausgabefeld zeigt eine vollständige `background: ...;`-Deklaration, die Sie unverändert in ein Stylesheet oder Inline-Style einfügen können.