Drei Arten von CSS-Verläufen und wann man sie verwendet
Lineare Verläufe (`linear-gradient()`) übertragen Farben entlang einer geraden Linie in beliebigen Winkeln — die häufigste Wahl für Hintergründe, Schaltflächen und Textfüllungen. Radiale Verläufe (`radial-gradient()`) strahlen von einem Mittelpunkt nach außen aus und erzeugen kreisförmige oder elliptische Farbausbreitungen für Spotlight-Effekte und Hero-Hintergründe. Konische Verläufe (`conic-gradient()`) rotieren Farben um einen Mittelpunkt und ermöglichen Tortendiagramme und Farbräder in reinem CSS.
Alle drei sind reines CSS — keine Bilder, kein SVG, kein JavaScript. Sie skalieren perfekt auf jede Auflösung und laden sofort.
Farbstopps, Positionen und Transparenz
Ein Verlauf wird durch mindestens zwei Farbstopps definiert. Jeder Stopp gibt eine Farbe und eine optionale Position (0 %–100 %) an. Du kannst jede gültige CSS-Farbe verwenden — Hex, rgb(), hsl(), oklch() oder benannte Farben. Alpha-Transparenz (rgba, hsla oder Hex mit Alpha) funktioniert vollständig.
Harte Farbstopps — zwei Stopps an derselben Position — erzeugen scharfe, nicht vermischte Farbkanten. Diese Technik ermöglicht Schachbrettmuster und gestreifte Hintergründe in reinem CSS.
Browser-Unterstützung und Vendor-Präfixe
Alle modernen Browser (Chrome, Firefox, Safari, Edge) unterstützen unpräfixiertes `linear-gradient()`, `radial-gradient()` und `conic-gradient()`. Konische Verläufe werden seit 2020 vollständig unterstützt. Für IE11 benötigst du eine Fallback-Vollfarbe.