In diesem Artikel
Was sind CSS-Verläufe?
Mit CSS-Verläufen erstellst du weiche Übergänge zwischen zwei oder mehr Farben, ganz ohne Bilder. Sie werden nativ vom Browser gerendert, sind dadurch auflösungsunabhängig und laden schnell. Verläufe gehören zu den vielseitigsten Werkzeugen im modernen Webdesign.
Es gibt drei Arten von CSS-Verläufen: linear (Übergang entlang einer geraden Linie), radial (strahlt von einem Mittelpunkt aus) und konisch (dreht sich um einen Mittelpunkt). Jeder Typ unterstützt mehrere Farbstopps, sodass du mit einer einzigen CSS-Eigenschaft komplexe, mehrschichtige Effekte erzeugen kannst.
So funktioniert unser Generator
Der CSS-Verlaufsgenerator von CheckTown bietet eine intuitive, visuelle Oberfläche zum Erstellen aller drei Verlaufsarten. Jede Änderung aktualisiert die Vorschau und die CSS-Ausgabe in Echtzeit.
- Wähle deine Verlaufsart — linear, radial oder konisch — und passe Winkel oder Position an
- Füge Farbstopps per Klick hinzu, entferne oder ordne sie neu. Nutze den Farbwähler oder tippe Hex-Codes direkt ein
- Kopiere das generierte CSS mit einem Klick und füge es direkt in dein Stylesheet ein
Kostenlos testen – keine Registrierung erforderlich
Verlauf erstellen →Wann du CSS-Verläufe einsetzen solltest
Verläufe sind eine leichtgewichtige Alternative zu Hintergrundbildern und können die Ladezeiten deutlich verbessern, während sie deinen Designs visuelle Tiefe verleihen.
- Hero-Bereiche und Banner — ersetze schwere Hintergrundbilder durch CSS-Verläufe für schnellere Ladezeiten
- Akzente für Buttons und Karten — dezente Verlaufshintergründe schaffen Tiefe ganz ohne zusätzliche Assets
- Overlays und Masken — lege Verläufe über Bilder, um die Lesbarkeit von Text zu verbessern oder künstlerische Effekte zu erzielen
Häufig gestellte Fragen
Funktionieren CSS-Verläufe in allen Browsern?
Ja. Lineare und radiale Verläufe werden von allen modernen Browsern unterstützt, darunter Chrome, Firefox, Safari und Edge. Auch konische Verläufe sind weit verbreitet und werden weltweit von über 95 % der Browser unterstützt.
Kann ich einen CSS-Verlauf animieren?
Nicht direkt — CSS kann keine Übergänge zwischen Verlaufswerten animieren. Du kannst jedoch die Eigenschaften background-position oder background-size animieren, um die Illusion eines sich bewegenden Verlaufs zu erzeugen, oder CSS-Custom-Properties mit @keyframes für fortgeschrittenere Effekte nutzen.
Wie viele Farbstopps kann ein Verlauf haben?
Es gibt keine feste Obergrenze für die Anzahl der Farbstopps in einem CSS-Verlauf. In der Praxis sind 2 bis 5 Stopps am gebräuchlichsten. Mehr Stopps erzeugen weichere, komplexere Übergänge, können aber auf sehr alten Geräten die Rendering-Leistung beeinträchtigen.