Wie man einen CSS-Verlauf erstellt (linear, radial oder konisch)
Veröffentlicht am 14. September 2026 · 2 Min. Lesezeit
CSS-Verläufe unterstützen mehrere Formen und eine beliebige Anzahl von Farbstopps, aber sich das genaue Ergebnis allein aus rohem Code vorzustellen ist schwierig. Dieses Tool gibt Ihnen eine Live-Vorschau, während Sie Farben, Winkel und Verlaufstyp wählen.
CSS-Verlaufsgenerator ausprobierenSchritte
- 1
Öffnen Sie den CSS-Verlauf-Generator
Gehen Sie zum Verlaufsgenerator.
- 2
Wählen Sie einen Verlaufstyp
Wählen Sie linear, radial oder konisch.
- 3
Legen Sie Ihre Farben und den Winkel fest
Wählen Sie eine Start- und Endfarbe, eine optionale Mittelfarbe, und den Winkel für lineare oder konische Verläufe.
- 4
Kopieren Sie das CSS
Fügen Sie die generierte Hintergrundregel direkt in Ihr Stylesheet ein.
Häufig gestellte Fragen
Ja — fügen Sie einen mittleren Farbstopp für einen Drei-Farben-Verlauf hinzu, zusätzlich zu Start- und Endfarbe.
Linear übergeht entlang eines geraden Winkels, radial dehnt sich von einem Mittelpunkt nach außen aus, und konisch fegt um einen Mittelpunkt wie ein Farbrad — jeder ergibt einen deutlich anderen visuellen Effekt.
Ja — sie rendert das tatsächlich generierte CSS, sodass die Vorschau genau das ist, was Sie sehen, sobald Sie den Code in Ihr Projekt kopieren.
Da Sie den echten Verlauf live gerendert sehen, gibt es kein Rätselraten beim Übersetzen eines mentalen Bildes in die richtige CSS-Syntax.