CSS-Gradient-Generator – Lineare, radiale und konische Farbverläufe erstellen

Verlaufstyp aus dem Dropdown auswählen. Mehrere Farbstopps hinzufügen, um schöne CSS-Hintergründe zu erstellen.

Winkel / Richtung
90°
Farbstopps
#6366f10%
#ec4899100%
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);

Verwendung

  1. Verlaufstyp auswählen (linear/radial/conic)
  2. Farbstopps hinzufügen und bearbeiten
  3. Richtung/Winkel festlegen
  4. CSS-Code kopieren

FAQ

Welche Gradientenarten werden unterstützt?
linear-gradient, radial-gradient und conic-gradient werden unterstützt.
Gibt es eine Begrenzung für Farbstopps?
Sie können beliebig viele Farbstopps hinzufügen.
Kann das generierte CSS direkt verwendet werden?
Ja. Kopieren Sie den Code und fügen Sie ihn direkt in Ihre CSS-Datei ein.
Werden meine Daten an einen Server gesendet?
Alle Verarbeitungen finden im Browser statt. Es werden keine Daten an einen Server gesendet.
Wie gebe ich den Verlaufswinkel an?
Bei linearen Verläufen können Sie den Winkel von 0 bis 360 Grad über einen Schieberegler oder eine numerische Eingabe festlegen. Die Vorschau wird beim Anpassen des Winkels in Echtzeit aktualisiert.

Verwandte Tools

Updateverlauf

Zuletzt aktualisiert: 2026-02-21

  • 2026-02-21 Erstveröffentlichung