CSS-Gradient-Generator
Gestalte einen Farbverlauf visuell — wähle Typ, Winkel und Farbstopps, beobachte die Live-Vorschau und kopiere das fertige CSS.
Als Nächstes
Your files are processed locally in your browser. They are not uploaded to our servers.
So funktioniert's
- Wähle den Verlaufstyp: linear, radial oder konisch.
- Passe den Winkel an und füge Farbstopps hinzu oder verschiebe sie, bis die Vorschau stimmt.
- Kopiere das erzeugte CSS in dein Stylesheet.
Was ist dieses Tool?
Der CSS-Gradient-Generator baut das background-CSS für lineare, radiale und konische Farbverläufe, während du sie visuell gestaltest. Jeder Farbstopp hat einen eigenen Farbwähler und Positionsregler, der Winkel ist bei linearen und konischen Verläufen einstellbar, und die Vorschau aktualisiert sich live bei jeder Änderung. Das Ergebnis ist eine saubere background-Deklaration zum direkten Einfügen in jedes Stylesheet. Alles läuft im Browser.
Typische Anwendungen
- Hintergründe für Hero-Bereiche und Buttons einer Website erstellen
- Einen Farbverlauf aus einem Design-Mockup in CSS nachbauen
- Mit konischen Verläufen für tortendiagramm-artige Effekte experimentieren
- Dezente zweifarbige Hintergründe für Karten und Banner erzeugen
Häufige Fragen
Was ist der Unterschied zwischen linearen, radialen und konischen Verläufen?
Lineare Verläufe blenden entlang einer geraden Linie über, radiale breiten sich vom Zentrum nach außen aus, und konische drehen sich wie ein Farbkreis um den Mittelpunkt.
Wie viele Farbstopps kann ich hinzufügen?
Zwischen zwei und sechs Stopps — genug für die meisten praktischen Verläufe, ohne dass das CSS unübersichtlich wird.
Funktionieren die erzeugten Verläufe in allen Browsern?
Lineare und radiale Verläufe funktionieren in jedem modernen Browser. Konische Verläufe werden von allen aktuellen Versionen von Chrome, Firefox, Safari und Edge unterstützt.
Kann ich das CSS mit Tailwind oder styled-components verwenden?
Ja — die Ausgabe ist eine normale background-Deklaration; der Wert lässt sich in jedem Styling-System nutzen, das CSS akzeptiert.