So funktioniert es
Wähle eine Verlaufsart, einen Winkel sowie zwei oder drei Farben mit ihren Positionen. Die Vorschau aktualisiert sich sofort, und du erhältst fertigen CSS-Code zum Einfügen sowie ein PNG in 1920 × 1080 für Folien, Hintergrundbilder und Social-Media-Beiträge.
background: linear-gradient(135deg, #2459e0 0%, #f2b33d 100%);
Verlaufsarten
- Linear: Die Farben gehen entlang einer geraden Linie im eingestellten Winkel ineinander über (0° = von unten nach oben, 90° = von links nach rechts).
- Radial: Die Farben breiten sich kreisförmig von der Mitte aus.
- Konisch: Die Farben laufen wie bei einem Farbkreis oder Tortendiagramm um die Mitte herum.
Tipps
- Farben, die auf dem Farbkreis nah beieinanderliegen, gehen weicher ineinander über als Gegenfarben.
- Halte Text auf Verläufen lesbar, indem du den Kontrast an beiden Enden prüfst.
- Alle modernen Browser unterstützen diese CSS-Verläufe ohne Präfixe.
Grundlagen und Quellen
- Die Verlaufssyntax folgt dem CSS Images Module Level 3 und 4 (W3C)
Zuletzt geprüft am 7. Oktober 2026
Häufige Fragen
Wie erstelle ich einen CSS-Farbverlauf?
Wähle eine Art, stelle Winkel und Farben ein und kopiere dann die erzeugte „background“-Zeile in dein Stylesheet.
Was bedeutet der Winkel?
Bei linearen Verläufen verläuft 0° von unten nach oben, 90° von links nach rechts und 180° von oben nach unten.
Kann ich mehr als zwei Farben verwenden?
Ja. Setze das Häkchen bei „Mittlere Farbe hinzufügen“, um einen dritten Farbstopp mit eigener Position hinzuzufügen.
Kann ich den Verlauf als Bild herunterladen?
Ja. „PNG herunterladen“ speichert ein Bild in 1920 × 1080, fertig für Folien, Hintergrundbilder oder Social Media.
Funktionieren diese Verläufe in allen Browsern?
Lineare und radiale Verläufe funktionieren überall; konische Verläufe funktionieren in allen aktuellen Versionen von Chrome, Edge, Firefox und Safari.