CSS linear-gradient() Funktion
Beispiel
Dieser lineare Farbverlauf beginnt oben. Es beginnt rot, wechselt zu gelb und dann zu blau:
#grad {
background-image: linear-gradient(red, yellow, blue);
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die Funktion linear-gradient() legt einen linearen Farbverlauf als Hintergrundbild fest.
Um einen linearen Farbverlauf zu erstellen, müssen Sie mindestens zwei Farbstopps definieren. Farbstopps sind die Farben, zwischen denen Sie glatte Übergänge rendern möchten. Sie können neben dem Verlaufseffekt auch einen Startpunkt und eine Richtung (oder einen Winkel) festlegen.
Beispiel für einen linearen Gradienten:
Ausführung: | CSS3 |
---|
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Funktion vollständig unterstützt.
Zahlen gefolgt von -webkit-, -moz- oder -o- geben die erste Version an, die mit einem Präfix funktioniert hat.
Function | |||||
---|---|---|---|---|---|
linear-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
CSS-Syntax
background-image: linear-gradient(direction, color-stop1,
color-stop2, ...);
Value | Description |
---|---|
direction | Defines a starting point and a direction (or an angle) along with the gradient effect. |
color-stop1, color-stop2,... | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis). |
Mehr Beispiele
Beispiel
Ein linearer Farbverlauf, der von links beginnt. Es beginnt rot und geht in blau über:
#grad {
background-image: linear-gradient(to right, red , blue);
}
Beispiel
Ein linearer Farbverlauf, der oben links beginnt (und nach unten rechts geht):
#grad {
background-image: linear-gradient(to bottom right, red , blue);
}
Beispiel
Ein linearer Farbverlauf mit einem bestimmten Winkel:
#grad {
background-image: linear-gradient(180deg, red, blue);
}
Beispiel
Ein linearer Farbverlauf mit mehreren Farbstopps:
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Beispiel
Ein linearer Farbverlauf mit Transparenz:
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
Verwandte Seiten
CSS-Tutorial: CSS-Verläufe