Über dieses Tool
Was ist der CSS Gradient Generator?
Erstelle CSS-Verläufe mit Live-Vorschau. Wähle den Typ (linear, radial, konisch), füge beliebig viele Farbstopps hinzu, lege den Winkel (bzw. die Position bei radialen Verläufen) fest und kopiere das generierte CSS. Die Ausgabe unterstützt alle modernen Browser; für ältere Browser fügen wir herstellerspezifische Fallbacks hinzu.
Designer nutzen das für Hero-Hintergründe, Button-Styles und Markenstimmungs-Explorationen. Ausgabe als CSS, Tailwind-Klassen oder SVG.
FAQ · CSS GRADIENT GENERATOR
Fragen zum CSS Gradient Generator
Welche Verlaufstypen werden unterstützt?
Linear (am häufigsten, winkelbasiert), radial (kreisförmig oder elliptisch, frei positionierbar) und konisch (der neueste Typ – er lenkt Farben um einen Mittelpunkt, ideal für tortendiagrammartige Designs). Alles wird als Standard-CSS ausgegeben.
Kann ich als Tailwind exportieren?
Ja – neben dem reinen CSS gibt der Generator Tailwind-Utility-Klassen aus (z. B. `bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500`), sofern die Farbstopps mit Tailwinds benannter Palette übereinstimmen.
Kostenlos?
Ja – keine Anmeldung nötig, läuft im Browser.