Farbverläufe

CSS-Verläufe erzeugen fließende Farbübergänge direkt im Browser, ohne Bilddateien. linear-gradient() verläuft entlang einer geraden Linie, radial-gradient() strahlt von einem Mittelpunkt aus und conic-gradient() dreht sich um einen Punkt wie ein Farbkreis. Jeder Typ hat eine repeating- Variante für Muster und Streifen. Verläufe zählen als background-image und können überall verwendet werden, wo Bilder akzeptiert werden, auch als border-image oder list-style-image.

Steckbrief Farbverläufe

Syntax: background-image: linear-gradient(direction, color-stop, ...)
Initialwert: none
Vererbt: Nein
Animierbar: Nein

Kategorie: Farben & Hintergründe
Werte: 14
Beispiele: 5
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 15.02.2026

Grundlagen

Ein Verlauf braucht mindestens zwei Farben (Color Stops). Der Browser berechnet automatisch den Übergang zwischen den Farben. Du kannst die Position jedes Color Stops in Prozent oder einer CSS-Einheit angeben, um den Übergang zu verschieben.

Bei linear-gradient() bestimmst du die Richtung mit einem Winkel (45deg) oder Schlüsselwörtern (to right, to bottom left). Der Standardwert ist to bottom (180deg).

Bei radial-gradient() kannst du Form (circle oder ellipse) und Größe (closest-side, farthest-corner etc.) angeben. Ohne Angabe entsteht eine Ellipse, die sich dem Element anpasst.

Bei conic-gradient() drehen sich die Farben um einen Punkt. Der Startwinkel und die Position des Mittelpunkts sind konfigurierbar. Damit lassen sich Tortendiagramme, Farbräder und dekorative Muster erstellen.

Die repeating- Varianten wiederholen den definierten Verlauf, sobald du feste Größen für die Color Stops angibst. Damit entstehen Streifen, Karos und andere geometrische Muster.

Syntax & Werte

14 Werte

linear-gradient()

Wert	Beschreibung	Beispiel
`to bottom`	Verlauf von oben nach unten. (Standard)	linear-gradient(to bottom, #1a56db, #059669)
`to right`	Verlauf von links nach rechts.	linear-gradient(to right, #1a56db, #059669)
`<angle>`	Verlauf in einem bestimmten Winkel. 0deg = nach oben, 90deg = nach rechts.	linear-gradient(45deg, #1a56db, #059669)
`to bottom right`	Verlauf diagonal zur unteren rechten Ecke.	linear-gradient(to bottom right, #1a56db, #059669)

radial-gradient()

Wert	Beschreibung	Beispiel
`ellipse`	Ellipsenförmiger Verlauf, passt sich dem Element an. (Standard)	radial-gradient(ellipse, #1a56db, #059669)
`circle`	Kreisförmiger Verlauf.	radial-gradient(circle, #1a56db, #059669)
`circle at <position>`	Kreis mit verschobenem Mittelpunkt.	radial-gradient(circle at 30% 70%, #1a56db, #059669)
`<size>`	Größe: closest-side, closest-corner, farthest-side, farthest-corner.	radial-gradient(circle closest-side, #1a56db, #059669)

conic-gradient()

Wert	Beschreibung	Beispiel
`from <angle>`	Startwinkel des Verlaufs. Standard ist 0deg (oben).	conic-gradient(from 90deg, #1a56db, #059669)
`at <position>`	Position des Mittelpunkts.	conic-gradient(at 30% 70%, #1a56db, #059669)
`Color Stops`	Farben mit optionalen Winkelangaben.	conic-gradient(red 0deg, blue 120deg, green 240deg)

Color Stops

Wert	Beschreibung	Beispiel
`<color>`	Farbe wird automatisch gleichmäßig verteilt.	linear-gradient(red, blue, green)
`<color> <position>`	Farbe an einer bestimmten Position.	linear-gradient(red 0%, blue 30%, green 100%)
`<color> <start> <end>`	Farbe füllt einen Bereich (harter Übergang).	linear-gradient(red 0% 33%, blue 33% 66%, green 66% 100%)

Beispiele

5 Beispiele

Die Richtung bestimmt, wohin der Verlauf fließt. Schlüsselwörter wie to right oder Winkel wie 135deg sind austauschbar.

Lineare Verläufe

.bottom   { background: linear-gradient(to bottom, #1a56db, #0f172a); }
.right    { background: linear-gradient(to right, #1a56db, #7c3aed); }
.diagonal { background: linear-gradient(135deg, #059669, #1a56db); }
.multi    { background: linear-gradient(to right,
              #dc2626, #f59e0b, #059669, #1a56db); }

<div class="linear-demo">
<div class="linear-box l-bottom">to bottom</div>
<div class="linear-box l-right">to right</div>
<div class="linear-box l-diagonal">135deg</div>
<div class="linear-box l-multi">4 Farben</div>
</div>

Radiale Verläufe eignen sich für Spotlights, Glüheffekte und weiche Hintergründe.

Radiale Verläufe

.circle  { background: radial-gradient(circle, #1a56db, #0f172a); }
.ellipse { background: radial-gradient(ellipse, #7c3aed, #0f172a); }
.offset  { background: radial-gradient(
             circle at 20% 30%, #059669, #0f172a); }

<div class="radial-demo">
<div class="radial-box r-circle">circle</div>
<div class="radial-box r-ellipse">ellipse</div>
<div class="radial-box r-offset">circle at 20% 30%</div>
</div>

Mit harten Color Stops (ohne Übergang) lassen sich Segmente wie in einem Tortendiagramm erstellen.

Tortendiagramm mit conic-gradient

.pie {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    #1a56db 0deg 144deg,    /* CSS 40% = 144° */
    #059669 144deg 252deg,  /* HTML 30% = 108° */
    #f59e0b 252deg 324deg,  /* JS 20% = 72° */
    #dc2626 324deg 360deg   /* Andere 10% = 36° */
  );
}

<div class="conic-demo">
<div class="pie"></div>
<div class="legend">
  <div><span class="legend-dot" style="background:#1a56db"></span>CSS 40%</div>
  <div><span class="legend-dot" style="background:#059669"></span>HTML 30%</div>
  <div><span class="legend-dot" style="background:#f59e0b"></span>JS 20%</div>
  <div><span class="legend-dot" style="background:#dc2626"></span>Andere 10%</div>
</div>
</div>

Mit der repeating- Variante und harten Color Stops entstehen Streifen und Muster.

Streifen-Muster

/* Horizontale Streifen */
.horizontal {
  background: repeating-linear-gradient(
    0deg,
    #dbeafe 0px, #dbeafe 10px,
    #1a56db 10px, #1a56db 12px
  );
}

/* Diagonale Streifen */
.diagonal {
  background: repeating-linear-gradient(
    45deg,
    #d1fae5 0px, #d1fae5 10px,
    #059669 10px, #059669 12px
  );
}

<div class="stripe-demo">
<div class="stripe-box s-horizontal"></div>
<div class="stripe-box s-diagonal"></div>
<div class="stripe-box s-thick"></div>
</div>

Ein linear-gradient mit transparent an den Rändern erzeugt eine elegante Trennlinie, die zu den Seiten hin ausblendet.

Dekorative Trennlinie

.gradient-divider {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    #1a56db,
    transparent
  );
}

<div class="divider-demo">
<p>Abschnitt 1</p>
<div class="gradient-divider"></div>
<p>Abschnitt 2</p>
<div class="gradient-divider"></div>
<p>Abschnitt 3</p>
</div>

Barrierefreiheit

Bei Verläufen ist der Kontrast nicht an jeder Stelle gleich. Wenn du Text auf einem Gradient platzierst, prüfe den Kontrast am schwächsten Punkt, also dort, wo die Textfarbe der Verlaufsfarbe am ähnlichsten ist. Ein Gradient von Dunkelblau zu Hellblau mit weißem Text kann in der Mitte problematisch werden, obwohl der Kontrast an den Rändern ausreicht.

Nutzer, die prefers-contrast: more aktiviert haben, benötigen oft stärkere Kontraste. Überleg dir, für diese Nutzer den Gradient durch eine solide Farbe zu ersetzen, die durchgehend ausreichenden Kontrast bietet. Verläufe sehen zwar schön aus, können aber die Lesbarkeit beeinträchtigen.

Ähnlich wie bei Farben generell dürfen Verläufe nicht die einzige Methode sein, um Informationen zu vermitteln. Wenn ein conic-gradient als Tortendiagramm dient, braucht es zusätzlich eine Legende, Tabelle oder Textbeschreibung, damit Screenreader-Nutzer und farbenblinde Menschen die Daten verstehen können.

Häufige Fehler

7 Fehler

01 Gradient als background-color verwenden

background-color: linear-gradient(...) funktioniert nicht. Verläufe sind Bilder und gehören zu background-image oder dem background Shorthand.

02 Harte Übergänge nicht an derselben Position

Für Streifen ohne weichen Übergang müssen die Color Stops exakt aneinander anschließen. red 0% 33%, blue 33% 66% erzeugt harte Kanten, red 0% 30%, blue 35% 65% hat einen weichen Übergang.

03 repeating-linear-gradient ohne feste Größen

Wenn du Prozente statt feste Einheiten verwendest, füllt der Verlauf den gesamten Bereich und wiederholt sich nicht. Verwende px, em oder rem für wiederholende Muster.

04 conic-gradient vergisst den Kreis

Für ein Tortendiagramm braucht das Element border-radius: 50% und gleiche Breite/Höhe. Ohne den Kreis sieht der konische Verlauf wie ein Quadrat aus.

05 Zu viele Color Stops

Mehr als 5-6 Farben in einem Verlauf sehen selten gut aus. Für komplexe Hintergründe sind Multiple Backgrounds mit einfachen Verläufen die bessere Wahl.

06 Verlauf-Richtung verwechselt

to right und 90deg sind identisch. Aber to bottom right ist nicht 135deg, sondern verläuft zur tatsächlichen Ecke. Das macht einen Unterschied bei nicht-quadratischen Elementen.

07 Performance bei komplexen Mustern

Viele überlagerte repeating-gradient-Muster können die Renderleistung beeinträchtigen. Bei Scroll-Animationen oder großen Flächen besser ein echtes Bild verwenden.

Browser-Kompatibilität

5 von 5

Alle drei Gradient-Typen und ihre repeating-Varianten werden von modernen Browsern vollständig unterstützt. conic-gradient wird seit 2020 breit unterstützt.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

CSS-Verläufe werden in HTML-Emails kaum unterstützt. Verwende Fallback-Farben.

Apple Mail

Komplett
Gmail

Teilweise

linear-gradient wird teilweise unterstützt. radial-gradient und conic-gradient nicht
Outlook

Keine

Keine Gradient-Unterstützung. Verwende VML für Outlook oder eine Fallback-Farbe
Thunderbird

Komplett
Yahoo Mail

Keine

Verläufe werden entfernt. Immer background-color als Fallback setzen

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da