Entwickler·Aktualisiert 2026-04-22

CSS Farbverlauf Generator

Lineare, radiale und konische Farbverläufe bauen. Bis zu 6 Farbstops.

So funktioniert es

1.
Typ wählen
Wähle ein Preset (16:9 Video, 9:16 Reel, 1:1 Post, 4:5 Portrait, 1.91:1 Open Graph) oder gib eigene Ausgangsmaße ein.
2.
Stops bearbeiten
Gib eine neue Breite oder Höhe ein. Die andere Dimension wird automatisch proportional berechnet. GCD wird zur Vereinfachung des Verhältnisses berechnet (z. B. 1920×1080 = 16:9).
3.
CSS kopieren
Ideal für Video-Export, Social-Media-Assets, Responsive Images oder CSS aspect-ratio-Properties. Ein Klick kopiert Breite, Höhe oder das Verhältnis.

Welche Browser unterstützen conic-gradient?+

Alle modernen Browser seit 2020. Für IE11 fallen Sie auf linear-gradient zurück.

Unterstützt das Tool Tailwind?+

Ja, bei linearen Verläufen wird ein Arbitrary-Value-Tailwind-Class ausgegeben.

Wie viele Farbstops sind möglich?+

2 bis 6.