Ein CSS Gradient (deutsch: CSS-Farbverlauf) ist eine visuelle Darstellung eines fließenden Übergangs zwischen zwei oder mehr definierten Farben, die direkt vom Webbrowser gerendert wird. CSS-Gradients werden über Stylesheets deklariert und verhalten sich technisch wie Hintergrundbilder, beanspruchen jedoch keine Ladezeit für HTTP-Requests.
Bedeutung
Farbverläufe sind ein zentrales Stilelement moderner Benutzeroberflächen (z. B. im Flat Design, Glassmorphismus oder Neo-Brutalismus). Sie verleihen Webseiten visuelle Tiefe und Dynamik. Da sie im Browser berechnet werden, sind sie vollkommen vektorbasiert, stufenlos skalierbar und extrem speichereffizient, was sich positiv auf die Ladezeit (Core Web Vitals) auswirkt.
Funktionsweise
CSS unterscheidet hauptsächlich drei Arten von Verläufen: linear-gradient() (linearer Verlauf entlang einer Richtung/Achse), radial-gradient() (kreisförmiger Verlauf von einem Zentrum nach außen) und conic-gradient() (konischer Verlauf um einen Mittelpunkt herum). In der CSS-Deklaration werden Richtung (Winkel), Farben und deren Haltepunkte (Color Stops in Prozent oder Pixeln) definiert. Moderne Verläufe nutzen HSL- oder LCH-Farbräume für besonders weiche Farbübergänge ohne unschöne Grauschleier.
Praxisbeispiel
Ein Design-System definiert einen dynamischen Hero-Hintergrund mit einem diagonalen Verlauf von einem leuchtenden HSL-Violett zu einem tiefen HSL-Blau. Auf mobilen Bildschirmen passt sich der Verlauf automatisch an, ohne dass Bilddateien neu geladen werden müssen.