Farbverläufe

Zuletzt aktualisiert am 15. Februar 2026

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.

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

linear-gradient()

radial-gradient()

conic-gradient()

Color Stops

Beispiele

Lineare Verläufe: Richtungen

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

.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: Kreis und Ellipse

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

.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>

Tortendiagramm mit conic-gradient

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

.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>

Streifen-Muster mit repeating-linear-gradient

Mit der repeating- Variante und harten Color Stops entstehen Streifen und 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>

Dekorative Trennlinie mit Gradient

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

.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

• 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.
• 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.
• 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.
• 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.
• 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.
• 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.
• 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

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

Email-Kompatibilität

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

Verwandte Eigenschaften