Die Funktion linear-gradient
Die Funktion linear-gradient erzeugt einen linearen
Farbverlauf. Wird auf Eigenschaften angewendet, die
ein Hintergrundbild festlegen: background,
background-image
oder ein Bild für den Rahmen: border-image,
background-image-source.
Syntax
Selektor {
background: linear-gradient([Winkel oder Richtung], Farbe1 Größe1, Farbe2 Größe2...);
}
Werte
| Wert | Beschreibung |
|---|---|
| Richtung |
Legt eine bestimmte Richtung des Verlaufs in beliebigen Winkeleinheiten
oder mit den Schlüsselwörtern top, left, right, bottom
oder deren Kombination fest: top left, top right und so weiter.
Die Reihenfolge der Wörter spielt keine Rolle: man kann top left und left top schreiben,
es gibt keinen Unterschied. Der Parameter ist optional: wenn er nicht angegeben wird, verläuft der Gradient
von oben nach unten (wie bei to top). Vor der Richtung steht das Wort to.
|
| Winkel | Winkel in beliebigen Winkeleinheiten. Kann positiv oder negativ sein. Der Parameter ist optional. Es kann gleichzeitig entweder ein Winkel oder eine Richtung angegeben werden (oder gar nichts). |
| Farbe1 | Startfarbe des Verlaufs in beliebigen FarbEinheiten. |
| Farbe2 | Endfarbe des Verlaufs in beliebigen FarbEinheiten. |
| Größe | Legt die Ausdehnung einer bestimmten Farbe des Verlaufs in beliebigen Größeneinheiten fest. |
Beispiel . Die einfachste Variante
Syntax:
Selektor {
background: linear-gradient(Startfarbe, Endfarbe);
}
Schauen wir uns ein Beispiel an:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Beispiel . Winkel hinzufügen
Syntax:
Selektor {
background: linear-gradient(Winkel, Startfarbe, Endfarbe);
}
Schauen wir uns ein Beispiel an:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Beispiel . Richtung hinzufügen
Anstelle eines Winkels kann eine Richtung hinzugefügt werden
top, left, right, bottom
oder deren Kombination: top left, top right
Vor der Richtung steht das Wort to.
Syntax:
Selektor {
background: linear-gradient(Richtung, Startfarbe, Endfarbe);
}
Schauen wir uns ein Beispiel an:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Beispiel . Richtung hinzufügen
Geben wir eine andere Richtung an:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Beispiel . Größe hinzufügen
Syntax:
Selektor {
background: linear-gradient(Farbe1 Größe1, Farbe2 Größe2);
}
Im folgenden Beispiel ist das Verhalten wie folgt:
Reines Rot wird von 0px bis
30px sein, von 30px bis 50px
verläuft der Gradient von Rot zu Blau, und
ab 50px bis zum Ende - reines Blau:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Beispiel . Mehr als 2 Farben hinzufügen
Syntax:
Selektor {
background: linear-gradient(Farbe1 Größe1, Farbe2 Größe2, Farbe3 Größe3...);
}
Im folgenden Beispiel ist das Verhalten wie folgt:
Reines Rot wird von 0px bis
30px sein, von 30px bis 50px
verläuft der Gradient von Rot zu Blau, und
von 50px bis 70px - der Gradient von Blau
zu Grün, und nach 70px - reines Grün:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Beispiel . Harte Übergänge
Im folgenden Beispiel ist das Verhalten wie folgt:
Reines Rot wird von 0px bis
30px sein, reines Blau - von 30px
bis 60px, reines Grün - nach 60px
(red 0px kann auch weggelassen werden):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
Beispiel . Größen können auch in Prozent angegeben werden
Im folgenden Beispiel ist das Verhalten wie folgt:
Reines Rot wird von 0% bis
30% sein, reines Blau - von 30%
bis 60%, reines Grün - nach 60%
(red 0% kann auch weggelassen werden):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
Beispiel . Kombination mit background-size
Im folgenden Beispiel ist das Verhalten wie folgt:
Reines Rot wird von 0px bis
30px sein, reines Blau - von 30px
bis 60px, wobei sich dies alles in
Abschnitten von 60px wiederholt
(wegen background-size:
60px;):
<div id="elem"></div>
#elem {
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
Siehe auch
-
die Funktion
radial-gradient,
die einen radialen Farbverlauf erzeugt -
die Funktion
repeating-linear-gradient,
die einen sich wiederholenden linearen Farbverlauf erzeugt -
die Funktion
repeating-radial-gradient,
die einen sich wiederholenden radialen Farbverlauf erzeugt
