Welche Gradiententypen werden unterstützt?

Linear (richtungsbasiert), radial (kreisförmig oder elliptisch) und konisch (winkelförmiger Sweep). Alle drei sind CSS3-Standard und werden in jedem modernen Browser unterstützt.

Wie füge ich mehr als zwei Farben hinzu?

Nutze den Button "Stopp hinzufügen", um weitere Farbstopps einzufügen. Jeder Stopp hat eine Farbe und eine Position zwischen 0 und 100 Prozent. Bis zu 8 Stopps sind möglich.

Welche Browser unterstützen konische Gradienten?

Konische Gradienten werden in Chrome 69+, Firefox 83+, Safari 12.1+ und Edge 79+ unterstützt. Für ältere Browser solltest du bei linearen oder radialen Gradienten bleiben.

Kann ich meinen Gradienten speichern?

Der Generator gibt eine CSS-Deklaration aus, die du in dein Stylesheet kopieren kannst. Ein Lesezeichen auf die URL speichert den Zustand aktuell nicht.

CSS-Gradienten-Generator

Erstelle lineare, radiale und konische CSS-Gradienten mit Live-Vorschau

Ihre Daten verlassen niemals Ihr Gerät

Gradiententyp

Winkel: 45°

Farbstopps (2/8)

Vorschau

CSS-Ausgabe

background: linear-gradient(45deg, #ff6e7f 0%, #bfe9ff 100%);

Vorlagen

Häufig gestellte Fragen

Welche Gradiententypen werden unterstützt?

Linear (richtungsbasiert), radial (kreisförmig oder elliptisch) und konisch (winkelförmiger Sweep). Alle drei sind CSS3-Standard und werden in jedem modernen Browser unterstützt.
Wie füge ich mehr als zwei Farben hinzu?

Nutze den Button "Stopp hinzufügen", um weitere Farbstopps einzufügen. Jeder Stopp hat eine Farbe und eine Position zwischen 0 und 100 Prozent. Bis zu 8 Stopps sind möglich.
Welche Browser unterstützen konische Gradienten?

Konische Gradienten werden in Chrome 69+, Firefox 83+, Safari 12.1+ und Edge 79+ unterstützt. Für ältere Browser solltest du bei linearen oder radialen Gradienten bleiben.
Kann ich meinen Gradienten speichern?

Der Generator gibt eine CSS-Deklaration aus, die du in dein Stylesheet kopieren kannst. Ein Lesezeichen auf die URL speichert den Zustand aktuell nicht.