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

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.

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

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.

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.

Die vollständige Referenz steht auf der MDN-Seite zu 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.

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.

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.

/* 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);

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.

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.

.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);
}

Schichten ist auch die Grundlage reicherer Effekte: Geschichtete radiale Leuchten ergeben einen Mesh-Verlauf in CSS, und eine dünne Rauschebene darüber verbirgt Stufen, wie in Banding im Farbverlauf 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 behandelt Farbtonrichtungen und Fallbacks.

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

.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);
}

Wenn du lieber mit einer Mischung startest, die schon Charakter hat, statt Stopps von Hand abzustimmen, spart ein Farbverlaufsgenerator 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.