# CSS linear-gradient(): der vollständige Leitfaden

[Canonical HTML page](https://gradiently.design/de/guide/css-linear-gradient)

Jeder Teil von linear-gradient() erklärt, mit einem Live-Beispiel neben dem Code: von der Standardrichtung über harte Stopps und geschichteten Glanz bis zu weicheren OKLCH-Mischungen.

## The short version

- Ein linearer CSS-Farbverlauf ist ein Bild, das der Browser entlang einer geraden Linie zeichnet, geschrieben mit der Funktion linear-gradient() und überall einsetzbar, wo ein Bild akzeptiert wird, meist bei background-image.
- Ohne Richtung läuft ein linearer Verlauf von oben nach unten, das entspricht 180deg; 0deg zeigt nach oben, und Winkel drehen im Uhrzeigersinn.
- Farbstopps ohne Positionen werden gleichmäßig verteilt, und zwei Stopps an derselben Position ergeben eine harte Kante statt einer Mischung.
- Mehrere Farbverläufe lassen sich in einem background-image schichten, durch Kommas getrennt, wobei der erste oben gezeichnet wird.
- Eine Interpolationsmethode wie in oklch hält die Mitte einer Mischung leuchtend, statt sie grau werden zu lassen.

Ein **linearer CSS-Farbverlauf** ist ein Bild, das der Browser entlang einer geraden Linie zeichnet und dabei von einer Farbe zur nächsten überblendet. Du schreibst ihn mit der Funktion `linear-gradient()` und nutzt ihn überall, wo CSS ein Bild annimmt, meist bei `background-image`. Er braucht keine Datei, skaliert auf jede Größe ohne Unschärfe und kostet nichts beim Herunterladen. Die kürzeste brauchbare Version sind zwei Farben: `linear-gradient(#0f172a, #38bdf8)` blendet von tiefem Marineblau oben zu Himmelblau unten über.

```css
.hero {
  background-color: #0f172a; /* shown if the gradient fails */
  background-image: linear-gradient(#0f172a, #38bdf8);
}
```

Der einfachste lineare Farbverlauf: zwei Farben, Standardrichtung, darunter eine einfarbige Fläche als Fallback.

Marine bis Himmel, von oben nach unten: `linear-gradient(#0f172a, #38bdf8)`

Der Code von oben, gerendert. Keine Richtung bedeutet von oben nach unten.

Dieser Leitfaden geht jeden Teil der Funktion in der Reihenfolge durch, in der du ihm begegnest. Willst du das größere Bild, wie lineare Verläufe im Vergleich zu radialen, konischen und Mesh-Mischungen stehen, beginne mit den [Arten von Farbverläufen](https://gradiently.design/de/guide/types-of-gradients).

## Die Syntax von linear-gradient()

Die Funktion nimmt eine optionale Richtung, eine optionale Methode zur Farbinterpolation und dann eine Liste von mindestens zwei Farbstopps. Alles wird durch Kommas getrennt, außer Richtung und Interpolationsmethode, die sich das erste Argument teilen.

| Teil | Beispiel | Was er tut |
| --- | --- | --- |
| Richtung als Winkel | `135deg`, `0.25turn` | Legt den Winkel der Verlaufslinie fest. 0deg zeigt nach oben, Winkel drehen im Uhrzeigersinn. |
| Richtung als Schlüsselwörter | `to right`, `to top left` | Richtet die Linie auf eine Seite oder Ecke der Box. |
| Interpolationsmethode | `in oklch`, `in srgb` | Wählt den Farbraum, in dem die Mischung berechnet wird. |
| Farbstopp | `#38bdf8 40%` | Eine Farbe, optional mit einer oder zwei Positionen entlang der Linie. |
| Farb-Hint | `30%` zwischen zwei Stopps | Verschiebt den Halbwegspunkt der Mischung zwischen ihren Nachbarn. |

Die Teile von linear-gradient() in der Reihenfolge ihres Auftretens. Nur die Farbstopps sind Pflicht.

Die vollständige Referenz steht auf der [MDN-Seite zu linear-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient), die auch die genaue Grammatik aus der CSS-Images-Spezifikation dokumentiert.

## Verlaufswinkel und Richtungsschlüsselwörter

Winkel folgen einem Kompass: `0deg` zeigt nach oben, `90deg` nach rechts, `180deg` nach unten und `270deg` nach links. Der Verlauf beginnt auf der gegenüberliegenden Seite und läuft in die angegebene Richtung, `90deg` läuft also von links nach rechts. Du kannst auch `turn`, `rad` oder `grad` schreiben, wobei `0.25turn` gleich `90deg` ist. Der Standard, wenn du nichts angibst, ist `to bottom`.

- 0deg: von unten nach oben: `linear-gradient(0deg, #1e1b4b, #f472b6)`
- 90deg: von links nach rechts: `linear-gradient(90deg, #1e1b4b, #f472b6)`
- 180deg: der Standard: `linear-gradient(180deg, #1e1b4b, #f472b6)`
- 135deg: von links oben nach rechts unten: `linear-gradient(135deg, #1e1b4b, #f472b6)`

Ein Paar aus Indigo und Pink in vier Winkeln. Die erste Farbe sitzt immer am Anfang der Linie.

Eck-Schlüsselwörter sind nicht dasselbe wie 45-Grad-Winkel. `to top right` neigt die Linie so, dass die mittlere Farbe genau zwischen den anderen zwei Ecken verläuft, egal welche Form die Box hat. Bei einem breiten Banner ist diese Linie viel flacher als `45deg`, das immer auf 45 Grad zeigt und die Form der Box ignoriert. Nutze Schlüsselwörter, wenn die Mischung die Ecken respektieren soll, und Winkel, wenn mehrere Elemente unterschiedlicher Form eine Richtung teilen sollen. Mehr zur Wahl von Richtungen steht in [Verlaufswinkel](https://gradiently.design/de/guide/gradient-angle).

> **Warum die Ecken immer passen** Die Verlaufslinie wird so gedehnt, dass ihre erste und letzte Farbe genau in den Ecken landen. Bei einer Box mit Breite W und Höhe H im Winkel A ist ihre Länge `abs(W × sin A) + abs(H × cos A)`. Deshalb sieht ein 135deg-Verlauf auf einem sehr breiten Element fast waagerecht aus.

## Farbstopps, Positionen und Hints

Stopps ohne Positionen werden gleichmäßig verteilt, drei Farben sitzen also bei 0 %, 50 % und 100 %. Gib einem Stopp eine Position in Prozent oder eine Länge, um ihn zu verschieben. Gibst du ihm zwei Positionen, hält die Farbe dazwischen einfarbig. Setzt du einen einzelnen Prozentwert zwischen zwei Stopps, wird er zum Hint: der Punkt, an dem die Mischung ihre Halbwegsfarbe erreicht, was eine Seite des Übergangs schneller macht als die andere.

```css
/* even spacing */
background-image: linear-gradient(90deg, #0c4a6e, #22d3ee, #f0f9ff);

/* a hint: the midpoint arrives early, at 20% */
background-image: linear-gradient(90deg, #0c4a6e, 20%, #22d3ee);

/* two positions: cyan holds solid from 35% to 65% */
background-image: linear-gradient(90deg, #0c4a6e, #22d3ee 35% 65%, #f0f9ff);
```

Drei Wege, dieselbe Mischung zu formen. Positionen können auch Längen wie 120px sein.

- Gleichmäßige Verteilung: `linear-gradient(90deg, #0c4a6e, #22d3ee, #f0f9ff)`
- Hint bei 20 %: `linear-gradient(90deg, #0c4a6e, 20%, #22d3ee)`
- Gehaltenes Band, 35 % bis 65 %: `linear-gradient(90deg, #0c4a6e, #22d3ee 35% 65%, #f0f9ff)`

Dieselbe Palette von tiefem Ozean bis Eis, durch Positionen und Hints auf drei Arten geformt.

## Harte Stopps für Streifen und Teilungen

Teilen sich zwei Stopps eine Position, bleibt kein Raum für eine Mischung, und du bekommst eine scharfe Kante. Browser begrenzen zudem einen Stopp, der vor dem vorherigen liegt, was eine praktische Abkürzung ergibt: `#f97316 50%, #1e293b 0` heißt, dass die zweite Farbe genau dort beginnt, wo die erste endet. Wiederhole die Idee mit `repeating-linear-gradient()`, und du hast Streifen.

- Teilung halb und halb: `linear-gradient(90deg, #f97316 50%, #1e293b 0)`
- Drei Bernsteinbänder: `linear-gradient(180deg, #fde68a 0 33%, #f59e0b 0 66%, #b45309 0)`
- Diagonale Warnstreifen: `repeating-linear-gradient(45deg, #1e293b 0 12px, #f97316 12px 24px)`

Harte Stopps zeichnen Formen statt Mischungen. Viele weitere stehen in [CSS-Muster](https://gradiently.design/de/guide/css-patterns).

## Mehrere Farbverläufe in einem Hintergrund schichten

`background-image` akzeptiert eine durch Kommas getrennte Liste, und das erste Bild wird oben gezeichnet. Ebenen scheinen nur dort durcheinander, wo sie transparent sind, daher blenden die oberen Verläufe meist zu `transparent` aus. Moderne Browser mischen mit vormultipliziertem Alpha, sodass das Ausblenden zu `transparent` keinen grauen Stich mehr in die Farbe zieht wie früher. Kombiniere Ebenen mit `background-size` und `background-repeat`, wenn eine Ebene nur einen Teil der Box bedecken soll.

```css
.card {
  background-color: #111827;
  background-image:
    /* top: a soft sheen across the upper third */
    linear-gradient(180deg, rgb(255 255 255 / 0.12), transparent 35%),
    /* bottom: the colour itself */
    linear-gradient(135deg, #312e81, #7c3aed 55%, #db2777);
}
```

Ein Glanz über einem Basisverlauf. Der erste Verlauf in der Liste wird oben gezeichnet.

Schichten ist auch die Grundlage reicherer Effekte: Geschichtete radiale Leuchten ergeben einen [Mesh-Verlauf in CSS](https://gradiently.design/de/guide/css-mesh-gradient), und eine dünne Rauschebene darüber verbirgt Stufen, wie in [Banding im Farbverlauf](https://gradiently.design/de/guide/gradient-banding) erklärt.

## Weichere Mischungen durch Farbinterpolation

Ist jede Farbe in einem älteren Format wie Hex, `rgb()` oder `hsl()` geschrieben, mischt der Browser aus Gründen der Abwärtskompatibilität in sRGB. sRGB-Mischungen zwischen weit entfernten Farbtönen führen durch stumpfe, gräuliche Mitten: Blau zu Gelb ist der klassische Fall. `in oklab` oder `in oklch` verlangt einen wahrnehmungsbasierten Farbraum, der die Mitte heller und gleichmäßiger hält. Der eigene Leitfaden zu [OKLCH-Farbverläufen in CSS](https://gradiently.design/de/guide/css-gradient-oklch) behandelt Farbtonrichtungen und Fallbacks.

- Standard sRGB: graue Mitte: `linear-gradient(90deg, #2563eb, #facc15)`
- in oklab: sauberere Mitte: `linear-gradient(90deg in oklab, #2563eb, #facc15)`
- in oklch: wandert durch den Farbton: `linear-gradient(90deg in oklch, #2563eb, #facc15)`

Blau zu Gelb auf drei Arten. Nur die Interpolationsmethode ändert sich.

### Vermeiden

- Lange Mischungen zwischen Gegenfarben in schlichtem sRGB
- `to top right`, wenn mehrere unterschiedlich geformte Karten eine Richtung teilen sollen
- Zu `white` ausblenden, wenn du ausblenden willst; nimm `transparent`
- Sehr weiche, dunkle, breite Mischungen ohne Körnung, die auf vielen Bildschirmen Banding zeigen

### Besser

- `in oklch` oder einen mittleren Stopp ergänzen, damit Mischungen lebhaft bleiben
- Einen Winkel wie `135deg` für ein einheitliches System nutzen
- Ebenen zu `transparent` ausblenden, damit das Darunterliegende durchscheint
- Eine zarte Rauschebene über große dunkle Verläufe legen

## Browserunterstützung und Fallbacks

`linear-gradient()` funktioniert ohne Präfix in jedem aktuellen Browser, die alten `-webkit-`-Versionen können also weg. Interpolationsmethoden, Stopps mit zwei Positionen und Hints sind neuer; Details findest du bei [caniuse](https://caniuse.com/css-gradients). Das sicherste Muster ist zuerst eine einfarbige `background-color`, dann der Verlauf, dann eine erweiterte Version in einer späteren Deklaration, die ältere Browser überspringen, weil sie sie nicht verstehen.

```css
.banner {
  background-color: #1e3a8a;
  background-image: linear-gradient(90deg, #1e3a8a, #f59e0b);
  /* browsers that understand interpolation methods use this line */
  background-image: linear-gradient(90deg in oklch, #1e3a8a, #f59e0b);
}
```

Progressive Erweiterung: Jede Zeile überschreibt die vorherige nur, wenn der Browser sie versteht.

Wenn du lieber mit einer Mischung startest, die schon Charakter hat, statt Stopps von Hand abzustimmen, spart ein [Farbverlaufsgenerator](https://gradiently.design/de/guide/gradient-generator) oder eine Bibliothek fertiger Hintergründe Zeit. So oder so: Behalte den Code. Ein Farbverlauf in CSS bleibt in jeder Größe scharf und wiegt ein paar Bytes.

## FAQ

### Wie mache ich einen linearen Farbverlauf in CSS?

Setze `background-image: linear-gradient(Richtung, Farbe1, Farbe2)` auf ein Element, zum Beispiel `linear-gradient(90deg, #0f172a, #38bdf8)`. Setze davor eine `background-color` als Fallback.

### Was ist die Standardrichtung eines linearen CSS-Farbverlaufs?

Von oben nach unten, dasselbe wie `to bottom` oder `180deg`. Die erste Farbe erscheint oben und die letzte unten.

### Wie mache ich eine harte Linie in einem linearen Farbverlauf?

Gib zwei benachbarten Stopps dieselbe Position, etwa `#f97316 50%, #1e293b 50%`, oder nimm `0` als zweite Position, damit sie auf den vorherigen Stopp begrenzt wird.

### Warum sieht die Mitte meines Farbverlaufs grau aus?

Hex-Farben mischen standardmäßig in sRGB, was die Mitte zwischen weit entfernten Farbtönen stumpf macht. Füge `in oklch` oder `in oklab` hinter dem Winkel ein oder setze einen helleren mittleren Stopp.

### Ist 45deg dasselbe wie to top right?

Nur bei einem Quadrat. `45deg` zeigt immer auf 45 Grad, während `to top right` seinen Winkel so anpasst, dass die mittlere Farbe zwischen den anderen zwei Ecken der Box verläuft.