CSS-Verläufe erklärt: linear, radial, conic und die Muster, die wirklich gut aussehen

Ein Verlauf ist das CSS-Feature, das jeder einfügt und niemand versteht. Sie schreiben background: linear-gradient(to right, #f00, #00f) und erhalten einen Rot-zu-Blau-Balken — und wenn Sie dann etwas wirklich Schönes machen wollen, ist das Ergebnis entweder ein matschiger Schmierer oder ein streifiges Durcheinander. Die Lösung ist ein Wechsel des Denkmodells: Ein Verlauf ist keine Farbe, er ist eine Funktion, die einen weichen Übergang über eine Fläche malt. Haben Sie die zwei Eingaben einmal gesehen — die Geometrie (wohin der Verlauf zeigt) und die Stopps (welche Farben wo erscheinen) —, ist alles Weitere ein Muster, auf dem Sie aufbauen können.

Ein Verlauf ist eine Funktion, keine Farbe

linear-gradient(...), radial-gradient(...) und conic-gradient(...) sind allesamt Bildfunktionen. Sie werden überall eingesetzt, wo ein Bild steht — background-image, background, mask-image, sogar border-image. Deshalb schreiben Sie background-image: linear-gradient(...), und deshalb koexistiert ein Verlauf mit einer Hintergrundfarbe (background: #0a0a0a linear-gradient(...)) — die Farbe scheint überall durch, wo der Verlauf transparent ist.

Die generische Form ist bei allen dreien dieselbe:

<funktion>( <geometrie>, <farbstopp>, <farbstopp>, ... )

Die Geometrie unterscheidet sich je Funktion; die Farbstopps sind gemeinsam, lernen Sie sie also einmal.

linear-gradient: Richtung und Farbstopps

Ein linearer Verlauf hat eine Richtung und eine Liste von Farbstopps:

background-image: linear-gradient(45deg, #ff6b6b 0%, #4ecdc4 100%);
background-image: linear-gradient(to right, #ff6b6b, #4ecdc4);

Die Richtung ist entweder ein Schlüsselwort — to top, to right, to bottom right — oder ein Winkel wie 45deg (im Uhrzeigersinn von „oben“ gemessen).
Jeder Stopp ist eine Farbe und eine optionale Position. Lassen Sie Positionen weg, verteilt der Browser die Stopps gleichmäßig; geben Sie Positionen an (0%, 50%, 120px), interpoliert der Browser zwischen ihnen.
Zwei Stopps sind der Normalfall, aber Sie können beliebig viele haben. Die Positionsliste ist, wo die Kraft steckt — besonders ein bestimmter Trick:

/* Hard Stop: zwei Farben an derselben Position = eine scharfe Kante, keine Mischung */
background-image: linear-gradient(to right, #f00 0%, #f00 50%, #00f 50%, #00f 100%);

Das ist eine rote Hälfte und eine blaue Hälfte mit einer haarscharfen Grenze. Hard Stops sind der Baustein für jedes Muster unten.

Streifen und Schachbretter: Verläufe als Texturen

Weil Verläufe Bilder sind, können Sie sie mit background-size kacheln und wiederholen. Streifen fallen direkt aus einem sich wiederholenden Verlauf:

background-image: repeating-linear-gradient(
  45deg,
  #f2f2f2 0px, #f2f2f2 12px,
  #d4d4d4 12px, #d4d4d4 24px
);

Lesen Sie es als: „Male eine diagonale 24-px-Kachel mit zwei Hard-Stop-Streifen, dann wiederhole.“ Ändern Sie Winkel und Breiten, und Sie erhalten Zebrastreifen, Zuckerstangenstreifen oder eine Fortschrittsbalken-Textur.

Ein Schachbrett sind zwei überlagerte Verläufe (oder ein Verlauf mit zwei Hard Stops, gekachelt):

background-image:
  linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%),
  linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;

Weil beide Schichten halbtransparent sind, lässt der Versatz abwechselnde Quadrate die darunterliegende Farbe zeigen. Genau diese Technik nutzen Bildwerkzeuge, um Transparenz anzuzeigen.

radial und conic: Verläufe, die strahlen

radial-gradient malt von einem Zentrum nach außen: radial-gradient(circle at 30% 30%, #ff9, #333). Optional ellipse/circle, eine Größe (closest-side, 100px 80px) und at <position>. Die klassischen Verwendungen: ein Spotlight/Glow, eine Vignette, ein dezentes inneres Highlight hinter einer Karte.
conic-gradient malt um einen Punkt herum, wie ein Farbrad: conic-gradient(from 0deg, #f00, #0f0, #00f, #f00). Verwendungen: in reinem CSS gezeichnete Tortendiagramme, Farbräder und der „Sonnenstrahl“-Hintergrund hinter einem Markenzeichen.

Beide nehmen dieselbe Farbstopp-Liste, und Hard Stops funktionieren auch dort — ein conic-Verlauf mit Hard Stops bei 0%, 33%, 67%, 100% ist ein vierteiliges Tortenstück.

Transparenz: Ausblendungen, Masken und Overlays

Die Stoppfarbe muss nicht deckend sein. Verläufe nach transparent sind, wie Sie Bilder ausblenden, Overlays abdunkeln und Masken bauen:

/* Ein Bild nach unten ausblenden, damit Text darauf liegen kann */
background-image: linear-gradient(to top, rgba(0,0,0,0.8), transparent);

/* Ein Foto maskieren, sodass seine Ränder verschmelzen */
-webkit-mask-image: linear-gradient(to right, transparent, #000 20%);

Das zweite Beispiel nutzt den Verlauf als Maske: Das Foto wird voll gezeigt, wo die Maske deckend ist, und verschwindet, wo sie transparent ist. Weil Verläufe Bildfunktionen sind, funktionieren sie in mask-image und -webkit-mask-image genauso wie in background-image.

Warum Verläufe matschig aussehen: vier Fehler

Zwei zu ähnliche Stopps. #333 bis #444 über ein großes Element liest sich wie Schmutz, nicht wie Tiefe. Vergrößern Sie den Abstand zwischen den Stopps oder fügen Sie einen mittleren hinzu.
Streifenbildung (Banding). In der Mitte eines langen Verlaufs sehen Sie manchmal sichtbare horizontale Bänder statt einer weichen Rampe. Es ist schlimmer auf Displays mit geringer Bittiefe; die Abhilfe ist ein leichtes Dither — ein schwaches Rausch-Overlay — oder das Vermeiden von Verläufen über eine sehr große Fläche.
Mittelpunkt an der falschen Stelle. Standardmäßig sitzt der Übergangsmittelpunkt auf halbem Weg zwischen den Stopps. linear-gradient(#000, #fff) bleibt lange dunkel und springt dann zu Weiß. Verschieben Sie den Mittelpunkt: linear-gradient(#000 0%, #fff 90%) zwingt das helle Ende, früher zu dominieren.
Vergessen, dass Transparenz eine Farbe ist. linear-gradient(#000, transparent) und linear-gradient(#000, rgba(0,0,0,0)) sind dasselbe — aber #000 zu transparent mischt auf einer farbigen Seite durch den Hintergrund, was für Overlays meist genau das ist, was Sie wollen.

Kurzreferenz

Verläufe sind Bildfunktionen: linear-gradient, radial-gradient, conic-gradient, nutzbar in background-image, mask-image und mehr.
Form: <funktion>(<geometrie>, <farbstopp>...). Geometrie ist Richtung/Winkel für linear, Form+Größe+Position für radial, Startwinkel für conic.
Stopps sind Farbe [Position]; lassen Sie Positionen weg, verteilt der Browser sie gleichmäßig.
Zwei Farben an derselben Position = ein Hard Stop — scharfe Kanten, die Basis von Streifen und Schachbrettern.
Kacheln Sie einen Verlauf mit background-size für wiederholte Texturen; repeating-linear-gradient baut die Wiederholung direkt ein.
conic-gradient(from 0deg, ...) malt um einen Punkt — Torten und Farbräder in reinem CSS.
Blenden Sie aus und maskieren Sie mit Verläufen nach transparent; Verläufe funktionieren als Masken, nicht nur als Hintergründe.
Banding und Matsch sind Geometrie-/Stopp-Probleme, kein Grund, Verläufe zu meiden.

Um einen Verlauf zu bauen, ohne Stopps von Hand zu berechnen, liefert der CSS-Gradient-Generator Live-Vorschauen für linear/radial/conic und kopiert das CSS. Verläufe passen natürlich zu Box-Shadows — ein weicher radialer Verlauf hinter einer Karte plus ein geschichteter Schatten ist die halbe Tiefe moderner UI.