Farbverläufe gehören zu den ausdrucksstärksten Gestaltungsmitteln im modernen Webdesign. Vom dezenten Hintergrund bis zum auffälligen Hero-Banner – ein gut gesetzter Verlauf gibt einer Oberfläche Tiefe und Charakter. Das Beste daran: CSS rendert Gradienten nativ als Bild, ohne dass eine einzige Grafikdatei geladen werden muss. Das spart Ladezeit und bleibt bei jeder Auflösung gestochen scharf. Dieser Artikel erklärt die drei Gradiententypen und wie du sie gezielt einsetzt.
Warum CSS-Gradienten statt Bilddateien?
Ein Verlauf als PNG oder JPG ist auf eine feste Größe festgelegt, wird beim Skalieren unscharf und kostet einen zusätzlichen HTTP-Request. Ein CSS-Gradient dagegen ist reiner Code: Er passt sich jeder Containergröße an, bleibt auf Retina-Displays scharf und lässt sich mit ein paar Zeichen anpassen. Außerdem kannst du Gradienten animieren, überlagern und mit Transparenz kombinieren – Möglichkeiten, die ein statisches Bild nicht bietet.
Der lineare Verlauf
Der linear-gradient ist der häufigste Typ. Die Farben verlaufen entlang einer geraden Linie. Die Richtung bestimmst du über einen Winkel oder ein Schlüsselwort:
to right– Verlauf von links nach rechts.to bottom– von oben nach unten (Standard, wenn nichts angegeben ist).45deg– diagonaler Verlauf in einem frei wählbaren Winkel.
Ein Beispiel: linear-gradient(135deg, #ff7e5f, #feb47b) erzeugt einen warmen Orange-Verlauf von oben links nach unten rechts. Die einzelnen Farben heißen Farbstopps (color stops), und davon kannst du beliebig viele angeben.
Der radiale Verlauf
Beim radial-gradient strahlen die Farben kreis- oder ellipsenförmig von einem Mittelpunkt nach außen. Das eignet sich hervorragend für Spotlight-Effekte, sanfte Vignetten oder den Eindruck einer Lichtquelle. Du kannst Form (circle oder ellipse), Position des Zentrums und Ausdehnung steuern. Ein radial-gradient(circle at center, #fff, #0a0a0a) erzeugt etwa einen weichen Übergang von hellem Zentrum zu dunklem Rand.
Der konische Verlauf
Der jüngste der drei, der conic-gradient, dreht die Farben um einen Mittelpunkt herum – wie die Segmente eines Tortendiagramms. Damit lassen sich überraschend vielseitige Effekte umsetzen: Farbräder, Fortschrittsanzeigen, dekorative Muster oder sogar einfache Pie-Charts ohne JavaScript. Die Syntax ähnelt den anderen Typen, nur dass die Farbstopps in Winkelgraden um den Kreis verteilt werden.
Alle drei Typen lassen sich visuell deutlich leichter erfassen als im Code. Mit dem CSS Gradient Generator stellst du Farbstopps per Klick zusammen, verschiebst Winkel und Positionen mit Schiebereglern und siehst das Ergebnis in Echtzeit – den fertigen CSS-Code kopierst du dann direkt in dein Projekt.
Farbstopps gezielt platzieren
Standardmäßig verteilt CSS die Farbstopps gleichmäßig. Du kannst aber jedem Stopp eine exakte Position zuweisen, etwa linear-gradient(to right, red 0%, yellow 30%, green 100%). Setzt du zwei Stopps auf dieselbe Position, entsteht eine harte Kante statt eines weichen Übergangs – praktisch für Streifenmuster oder zweifarbige Flächen. Auch Transparenz ist möglich: Mit rgba() oder dem transparent-Schlüsselwort erstellst du Verläufe, die sanft auslaufen.
Typische Einsatzszenarien
- Hero-Hintergründe: ein kräftiger diagonaler Verlauf als Bühne für Überschrift und Call-to-Action.
- Buttons: ein subtiler Verlauf gibt Schaltflächen einen plastischen, hochwertigen Eindruck.
- Overlays: ein Verlauf von transparent zu dunkel über einem Foto sorgt für lesbaren Text.
- Texteffekte: in Kombination mit
background-clip: textbekommst du farbverlaufende Schrift.
Performance und Barrierefreiheit
Gradienten sind günstig zu rendern, sollten aber mit Bedacht eingesetzt werden. Achte besonders auf Kontrast: Wenn Text auf einem Verlauf liegt, muss er über die gesamte Fläche lesbar bleiben – also auch an der hellsten und dunkelsten Stelle. Ein dezentes Overlay hilft hier. Den Kontrast deiner Farbkombination prüfst du am besten mit dem Farbkontrast Checker, bevor du den Verlauf produktiv einsetzt. Eine harmonische Ausgangspalette liefert dir der Farbpalette Generator.
Häufige Fragen
Wie viele Farben kann ein Gradient haben?
Theoretisch beliebig viele. In der Praxis wirken zwei bis vier Farbstopps am ausgewogensten. Zu viele Farben lassen einen Verlauf schnell unruhig oder kitschig wirken.
Werden CSS-Gradienten von allen Browsern unterstützt?
linear- und radial-gradient werden seit Jahren von allen modernen Browsern unterstützt. conic-gradient ist etwas jünger, läuft aber in allen aktuellen Browsern zuverlässig. Für sehr alte Browser kannst du eine einfarbige Fallback-Farbe definieren.
Kann ich einen Gradient animieren?
Direkt animieren lassen sich Gradienten in CSS nur eingeschränkt, da der background-image nicht interpoliert wird. Üblich ist der Trick, einen größeren Verlauf über background-position zu verschieben oder mit Custom Properties zu arbeiten.