CSS/Funktionen/linear-gradient()

Browserunterstützung
caniuse.com

Die CSS-Funktion linear-gradient() legt einen linearen Farbverlauf fest

anwendbar auf

background-image, border-image, list-style-image, mask-image

Parameter

* eine Angabe der Richtung des Verlaufs als Winkelmaß oder durch die Angabe einer Ecke (top right, bottom right, bottom left, top left) bzw. Seite des Elements (top, right, bottom, left) in Verbindung mit dem Schlüsselwort to.

Die angegebene Richtung ist die Ausbreitungsrichtung des Verlaufs.

Der Standardwert ist dabei to bottom = 180deg = 200grad = 3.1415rad

Der Winkel wird mathematisch negativ, also mit dem Uhrzeigersinn, gemessen (0deg = to top, 90deg = to right).

Der Scheitelpunkt des Winkels ist dabei der Mittelpunkt der durch background-clip festgelegten Hintergrundbox des Elements.

• mindestens zwei „Color-Stop“-Angaben

Ein „Color-Stop“ besteht aus einer Farb- und einer Längenangabe und legt fest, welche Farbe an welcher Stelle des Verlaufs dargestellt werden soll.

Fehlen die Längenangaben, so wird die zur Verfügung stehende Breite in soviele Teile geteilt, wie Farbübergänge vorhanden sind.

linear-gradient(red, green, red) = linear-gradient(red 0, green 50%, red 100%)

Auf die Angaben 0 und 100% kann grundsätzlich verzichtet werden, ggf. ebenso auf einen ersten und letzten Color-Stop.

linear-gradient(red 0, green 50%, red 100%) = linear-gradient(red, green 50%, red)

linear-gradient(red, red 25%, green 75%, green) = linear-gradient(red 25%, green 75%)

Scharfe Übergänge erreicht man durch die Festlegung zweier Farben an einem Ort

Beispiel

#Deutschland {
  background-image: 
   linear-gradient(black 33.3%, red 33.3%, red 66.6%, gold 66.6%);
}
#Regenbogen {
  background-image: 
    linear-gradient(to right, red, orange, yellow, green, blue, purple);
}

Im oberen Beispiel verläuft der Verlauf standardmäßig von oben nach unten. Die Farben haben durch die doppelten Colorstops bei 33.3 und 66.6% scharfe Übergänge. Im unteren Beispiel verläuft der Verlauf nach rechts. Die verfügbare Fläche wird zu gleichen Teilen zwischen den Farben aufgeteilt, was einen Regenbogen mit weichen Übergängen führt.

Siehe auch

• CSS/Tutorials/Hintergrund/Verläufe
• Tricks mit border-image Rahmen mit Verlauf
• Masken und Beschneidungen/Masken
  • mask-image Teiltransparente Bereiche

Weblinks

• W3C: Linear Gradients: the linear-gradient() notation
• MDN: linear-gradient()
• Browser-Support: caniuse.com