CSS-Verläufe in der Praxis
Geprüft am 28. Juli 2026
Boltpic
Die Artikel beschreiben die aktuellen Boltpic-Werkzeuge und verlinken relevante technische Quellen. Ergebnisse, die von Bild, Browser oder Gerät abhängen, werden als variabel gekennzeichnet.
Ein CSS-Verlauf braucht keinen separaten Hintergrundbild-Download; der Browser zeichnet ihn beim Rendern. Er bleibt in jeder Auflösung scharf und lässt sich im Code anpassen — praktisch für Hero-Bereiche, Buttons, Diagramme und lesbare Overlays auf Fotos.
Die Syntax lernt man an einem Nachmittag. Etwas länger dauert es, die Rezepte und die Fallstricke zu kennen — genau dafür ist dieser Ratgeber da.
linear-gradient: das Arbeitstier
background: linear-gradient(135deg, #0066cc, #7a3ce8);Erstes Argument: die Richtung, als Winkel (0deg zeigt nach oben, 90deg nach rechts) oder als Schlüsselwort wie „to right“. Danach die Farbstopps, beliebig viele. Standardmäßig verteilen sie sich gleichmäßig; mit einer Prozentangabe steuerst du die Mischung — linear-gradient(90deg, #0066cc 30%, #7a3ce8) hält die ersten 30 % sattes Blau, bevor es überblendet.
Harte Stopps: Streifen und geteilte Hintergründe
Setze zwei Stopps auf dieselbe Position, und die Überblendung verschwindet — übrig bleibt eine messerscharfe Kante. Dieser eine Trick macht aus Verläufen einen Mustergenerator:
/* zweifarbig geteilt */
background: linear-gradient(90deg, #1d1d1f 50%, #f5f5f7 50%);
/* diagonale Streifen */
background: repeating-linear-gradient(45deg,
#0066cc 0 12px, #eef4ff 12px 24px);Radiale und konische Verläufe
radial-gradient breitet sich von einem Mittelpunkt aus und kann Licht- oder Spotlight-Effekte erzeugen. radial-gradient(circle at 30% 20%, #ffffff33, transparent 60%) beschreibt einen hellen Punkt, der transparent ausläuft. conic-gradient dreht sich um das Zentrum und eignet sich für Fortschrittsringe, Kreisdiagramme oder Farbkreise:
/* ein 70%-Fortschrittsring, ohne JavaScript */
background: conic-gradient(#0066cc 0 70%, #e0e0e0 70% 100%);
border-radius: 50%;Drei Beispiele für Benutzeroberflächen
Das Foto-Overlay. Weißer Text direkt auf einem Foto ist überall dort unlesbar, wo das Foto hell ist. Die Standardlösung ist ein Verlaufs-Scrim — oben transparent, unten dunkel, unter dem Text, über dem Bild:
background:
linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.65)),
url(hero.webp) center / cover;Verlaufstext. Der Verlauf wird auf die Buchstaben selbst zugeschnitten:
.headline {
background: linear-gradient(90deg, #0066cc, #00b3a4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}Ein dezentes Button-Highlight. Ein kleiner Helligkeitsunterschied von oben nach unten kann Tiefe erzeugen, ersetzt aber keine klaren Hover-, Fokus- und Aktivzustände. Prüfe außerdem den Kontrast von Beschriftung und Umgebung.
Banding: der klassische Verlaufs-Bug
Auf großen oder dunklen Verläufen können sichtbare Streifen statt einer weichen Mischung erscheinen. Dieses Banding hängt unter anderem von Farbpräzision, Display, Komprimierung und dem Rendering des Browsers ab und kann zwischen Geräten variieren.
Gegenmittel, nach Aufwand sortiert: die Distanz verkürzen oder die Farben näher zusammenrücken; einen Zwischenstopp einfügen oder den Verlauf über eine leichte Farbtonverschiebung führen (Dunkelblau → tiefes Violett → Schwarz bandet weit weniger als Dunkelblau → Schwarz); oder eine kaum sichtbare Rauschtextur darüberlegen — so dithern Film und Games ihre Verläufe seit Jahrzehnten.
Farben wählen, die wirklich harmonieren
Nahe Farbtöne ergeben häufig eine vorhersehbare Mischung; weit entfernte Farbtöne können eine unerwünschte Zwischenfarbe erzeugen. Ein zusätzlicher Stopp steuert den Verlauf. Du kannst Kandidaten auch aus einem Foto aufnehmen, im Verlaufswerkzeug kombinieren und anschließend in der vorgesehenen Oberfläche prüfen.
Die Interpolation zwischen Verlaufswerten wird nicht in jeder Umgebung gleich unterstützt. Für Bewegung sind eine animierte background-position oder das Überblenden zweier Ebenen oft vorhersehbarer. Prüfe Leistung und Einstellungen für reduzierte Bewegung in den Zielbrowsern.