Ausführbare CSS-Docs: Farbverlauf

Q: Wie erstelle ich einen radialen Farbverlauf in CSS?

Nimm background-image: radial-gradient(#93c5fd, #1e3a8a);. Form und Position setzt du vor die Farben, etwa radial-gradient(circle at top left, #93c5fd, #1e3a8a).

Q: Was ist der Unterschied zwischen circle und ellipse in radial-gradient?

ellipse (der Standard) passt sich den Proportionen der Box an, ist in einer breiten Box also breit. circle hält den Verlauf rund, egal welche Form die Box hat.

Q: Wie lege ich die Richtung eines linearen Farbverlaufs fest?

Setz eine Richtung oder einen Winkel an den Anfang: linear-gradient(to right, red, blue) oder linear-gradient(45deg, red, blue). Standard ist to bottom (180deg); 0deg zeigt nach oben, und Winkel drehen im Uhrzeigersinn.

Q: Wie mache ich harte Streifen statt eines weichen Übergangs?

Gib zwei Farben dieselbe Stoppposition: linear-gradient(90deg, #2563eb 50%, #f59e0b 50%) wechselt in der Mitte die Farbe, ohne Übergang. repeating-linear-gradient wiederholt ein Muster aus solchen Stopps.

Q: Kann ich einen Farbverlauf als background-color verwenden?

Nein. Ein Farbverlauf ist ein Bild, gehört also in background-image oder die Kurzschreibweise background. background-color: linear-gradient(...) ist ungültig und wird ignoriert.

Radiale Farbverläufe

radial-gradient() lässt Farben von einem Mittelpunkt nach außen ineinander übergehen. Wie jeder CSS-Verlauf ist es ein Bild und gehört deshalb in background-image (oder die Kurzschreibweise background):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 220px; height: 120px; border-radius: 8px; margin-bottom: 4px; }
    .ellipse { background-image: radial-gradient(#93c5fd, #1e3a8a); }
    .circle { background-image: radial-gradient(circle, #93c5fd, #1e3a8a); }
    .corner { background-image: radial-gradient(circle at top left, #fde68a, #f59e0b 40%, #b45309); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box ellipse"></div>ellipse (default)</div>
    <div><div class="box circle"></div>circle</div>
    <div><div class="box corner"></div>circle at top left</div>
  </div>
</body>
</html>

Die vollständige Syntax lautet radial-gradient(shape size at position, color stops). Alles vor den Farben ist optional.

Teil	Werte	Standard
Form	`circle`, `ellipse`	`ellipse`
Größe	`closest-side`, `closest-corner`, `farthest-side`, `farthest-corner` oder Längen	`farthest-corner`
Position	`at center`, `at top left`, `at 30% 70%`, `at 20px 40px`	`at center`
Farbstopps	Zwei oder mehr Farben, jede mit optionaler Position

Das Schlüsselwort für die Größe bestimmt, wo die letzte Farbe erreicht wird: an der nächstgelegenen Seite der Box, der entferntesten Ecke und so weiter. Ändere die Werte hier und sieh zu, wie der Verlauf neu gezeichnet wird:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box { height: 160px; margin-top: 10px; border: 1px solid #d1d5db; border-radius: 8px; }
    #out { font-size: 13px; }
  </style>
</head>
<body>
  <label>radial-gradient( <input id="val" value="circle closest-side at 30% 50%, #f59e0b, #2563eb" size="42"> )</label>
  <div id="box"></div>
  <code id="out"></code>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      const value = 'radial-gradient(' + input.value + ')';
      const ok = CSS.supports('background-image', value);
      if (ok) box.style.backgroundImage = value;
      document.getElementById('out').textContent = ok ? value : 'invalid gradient';
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Probier circle farthest-corner at 30% 50%, #f59e0b, #2563eb, ellipse at bottom, white, #16a34a und circle 40px, #f59e0b 99%, transparent (ein Punkt mit harter Kante).

Lineare Farbverläufe

linear-gradient() lässt Farben entlang einer geraden Linie übergehen. Setz eine Richtung oder einen Winkel an den Anfang, dann die Farben:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Linear gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 160px; height: 90px; border-radius: 8px; margin-bottom: 4px; }
    .down { background-image: linear-gradient(#2563eb, #16a34a); }
    .right { background-image: linear-gradient(to right, #2563eb, #16a34a); }
    .angle { background-image: linear-gradient(45deg, #2563eb, #16a34a); }
    .three { background-image: linear-gradient(to right, #dc2626, #f59e0b, #16a34a); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box down"></div>default (to bottom)</div>
    <div><div class="box right"></div>to right</div>
    <div><div class="box angle"></div>45deg</div>
    <div><div class="box three"></div>three colors</div>
  </div>
</body>
</html>

Winkel beginnen bei 0deg mit Richtung nach oben und drehen im Uhrzeigersinn, also ist 90deg gleich to right und 180deg der Standard to bottom. to right bleibt auf Seiten von rechts nach links physisch; spiegle es selbst, wenn der Verlauf der Leserichtung folgen soll.

Farbstopps und harte Stopps

Jede Farbe kann eine Position haben. Ohne Positionen werden die Farben gleichmäßig verteilt. Teilen sich zwei Farben eine Position, erfolgt der Wechsel sofort, und so zeichnest du Streifen, Flaggen und Fortschrittsbalken:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color stops</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .bar { height: 40px; border-radius: 6px; margin: 4px 0 12px; }
    .shifted { background: linear-gradient(to right, #2563eb 70%, #f59e0b); }
    .hard { background: linear-gradient(to right, #2563eb 60%, #e5e7eb 60%); }
    .stripes {
      background: repeating-linear-gradient(45deg,
        #f59e0b 0 12px, #111827 12px 24px);
    }
    .rings { height: 120px; background: repeating-radial-gradient(circle, #2563eb 0 8px, #bfdbfe 8px 16px); }
  </style>
</head>
<body>
  Solid until 70%, then blends
  <div class="bar shifted"></div>
  Hard stop at 60% (a progress bar)
  <div class="bar hard"></div>
  repeating-linear-gradient
  <div class="bar stripes"></div>
  repeating-radial-gradient
  <div class="bar rings"></div>
</body>
</html>

Ein Stopp kann auch zwei Positionen haben, #111827 12px 24px, was ein einfarbiges Band von 12px bis 24px zeichnet.

Konische Farbverläufe

conic-gradient() lässt Farben um einen Mittelpunkt kreisen, wie die Zeiger einer Uhr. Mit harten Stopps zeichnet es ein Kreisdiagramm ganz ohne Bilder oder JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Conic gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; display: flex; gap: 24px; }
    .pie {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(#2563eb 0 45%, #16a34a 45% 75%, #f59e0b 75%);
    }
    .wheel {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    }
  </style>
</head>
<body>
  <div><div class="pie"></div>45%, 30%, 25%</div>
  <div><div class="wheel"></div>A color wheel</div>
</body>
</html>

Ein in CSS gezeichnetes Diagramm ist für Screenreader unsichtbar, also schreib die Zahlen zusätzlich als Text hin.

Text mit Farbverlauf

Schneide einen Hintergrund mit Verlauf auf die Buchstaben zu und mach den Text selbst transparent:

.gradient-text {
  background: linear-gradient(90deg, #2563eb, #db2777);
  -webkit-background-clip: text; /* older browsers need the prefix */
  background-clip: text;
  color: transparent;
}

Denk an eine einfache color als Fallback: Klappt das Zuschneiden nicht, verschwindet der Text. Text mit Farbverlauf hat außerdem ungleichmäßigen Kontrast, also nimm ihn nur für große Überschriften.

Verläufe lassen sich in einer einzigen background-image-Liste mit Bildern und anderen Verläufen stapeln; die Seite zu Hintergrundbildern behandelt Ebenen, Größe und Position.

Häufige Fehler

background-color: linear-gradient(...). Ein Verlauf ist ein Bild: Nimm background-image oder background.
Grad in die falsche Richtung. 0deg zeigt nach oben, nicht nach rechts. 90deg geht nach rechts.
Ein Verlauf an einem Element ohne Höhe. Es ist nichts zu sehen; gib ihm Inhalt oder eine Größe.
Trübe Mittelfarben. Ein Übergang zwischen zwei gesättigten Gegenfarben wie Rot und Grün läuft in sRGB durch ein Graubraun. Füge einen mittleren Stopp hinzu oder mische in einem anderen Farbraum: linear-gradient(in oklch, red, green).
Streifenbildung bei großen, dezenten Verläufen. Sehr ähnliche Farben auf großer Fläche zeigen Stufen; etwas mehr Kontrast zwischen den Stopps hilft.

Häufig gestellte Fragen

Wie erstelle ich einen radialen Farbverlauf in CSS?

Nimm background-image: radial-gradient(#93c5fd, #1e3a8a);. Form und Position setzt du vor die Farben, etwa radial-gradient(circle at top left, #93c5fd, #1e3a8a).

Was ist der Unterschied zwischen circle und ellipse in radial-gradient?

ellipse (der Standard) passt sich den Proportionen der Box an, ist in einer breiten Box also breit. circle hält den Verlauf rund, egal welche Form die Box hat.

Wie lege ich die Richtung eines linearen Farbverlaufs fest?

Setz eine Richtung oder einen Winkel an den Anfang: linear-gradient(to right, red, blue) oder linear-gradient(45deg, red, blue). Standard ist to bottom (180deg); 0deg zeigt nach oben, und Winkel drehen im Uhrzeigersinn.

Wie mache ich harte Streifen statt eines weichen Übergangs?

Gib zwei Farben dieselbe Stoppposition: linear-gradient(90deg, #2563eb 50%, #f59e0b 50%) wechselt in der Mitte die Farbe, ohne Übergang. repeating-linear-gradient wiederholt ein Muster aus solchen Stopps.

Kann ich einen Farbverlauf als background-color verwenden?

Nein. Ein Farbverlauf ist ein Bild, gehört also in background-image oder die Kurzschreibweise background. background-color: linear-gradient(...) ist ungültig und wird ignoriert.

Verwandte Konzepte