CSS-Gradient-Generator

Erzeugt CSS-Verläufe.

Ausgabe

So nutzen Sie es

Vier Schritte: einfügen, ausführen, prüfen, kopieren. Alles bleibt im Browser.

Eingabe einfügen

CSS, HTML, JSON oder anderen Text einfügen. Nichts wird hochgeladen.

Tool ausführen

Auf Konvertieren oder Ausführen klicken. Das Ergebnis erscheint sofort.

Ausgabe prüfen

Generierten Code und Hinweise prüfen, bevor Sie ihn übernehmen.

Kopieren und nutzen

Ausgabe kopieren und in Ihr Projekt einfügen.

Über dieses Tool

Der Generator baut einen linearen Verlauf mit zwei Farbstopps, zeigt ihn in einer Vorschau und liefert sowohl reines CSS als auch eine arbiträre Tailwind-Hintergrundklasse.

Beispiel

Die Voreinstellung zeigt einen diagonalen Übergang von Himmelblau zu Grün.

Eingabe

135deg · #0ea5e9 → #22c55e

Ausgabe

background: linear-gradient(135deg, #0ea5e9, #22c55e);

Tipp

Markenverläufe mit vielen Stopps bleiben in CSS-Variablen deutlich wartbarer.