Referenz:CSS/Eigenschaften/linear-gradient()

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Eigenschaft linear-gradient() CSS 3.0
Beschreibung legt einen linearen Farbverlauf fest
erlaubte Werte
  • 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
default-Wert

to bottom = 180deg = 200grad = 3.1415rad

anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung nein
animierbar nein
Browsersupport
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
Spezifikation W3c logo klein.gif linear-gradients
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.

Beachten Sie

{{{Hinweis}}}

Tipp