CSS-Gradient-Generator
Erzeugt CSS-Verläufe.
Ü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.
So nutzen Sie es
Beide Farben und den Winkel einstellen, Verlauf erzeugen, das Ergebnis im Vorschaustreifen prüfen und danach background oder bg-[linear-gradient(…)] kopieren. Für Tailwind bleibt die arbiträre Klasse die kürzere Schreibweise.
Beispiel
Die Voreinstellung zeigt einen diagonalen Übergang von Himmelblau zu Grün.
Eingabe
135deg · #0ea5e9 → #22c55eAusgabe
background: linear-gradient(135deg, #0ea5e9, #22c55e);Tipp
Markenverläufe mit vielen Stopps bleiben in CSS-Variablen deutlich wartbarer.
Gut zu wissen
Kann ich mehr als zwei Farbstopps hinzufügen?
Dieser Generator erstellt einen linearen Verlauf mit zwei Stopps. Für mehrstufige Markenverläufe kopieren Sie das Ergebnis und ergänzen Stopps von Hand oder legen sie in CSS-Variablen ab.
Wie nutze ich die Tailwind-Ausgabe?
Fügen Sie die Klasse bg-[linear-gradient(…)] einem Element hinzu. Tailwind liest sie als Arbitrary Value, eine Konfigurationsänderung ist nicht nötig.