linear-gradient()

<side-or-corner>

Die Position des Startpunkts der Gradientenlinie. Falls angegeben, besteht sie aus dem Wort to und bis zu zwei Schlüsselwörtern: eines gibt die horizontale Seite (left oder right) und das andere die vertikale Seite (top oder bottom) an. Die Reihenfolge der Seiten-Schlüsselwörter spielt keine Rolle. Wenn nicht angegeben, ist der Standardwert to bottom.

Die Werte to top, to bottom, to left und to right sind äquivalent zu den Winkeln 0deg, 180deg, 270deg und 90deg. Die anderen Werte werden in einen Winkel übersetzt.

<angle>

Der Richtungswinkel der Gradientenlinie. Ein Wert von 0deg ist gleichbedeutend mit to top; steigende Werte drehen sich im Uhrzeigersinn.

<linear-color-stop>

Ein <color> Wert eines Farbstopps, gefolgt von einer oder zwei optionalen Stopp-Positionen (jede entweder ein <percentage> oder ein <length> entlang der Achse des Gradienten).

<color-hint>

Ein Interpolation Hinweis, der definiert, wie der Gradient zwischen benachbarten Farbstopps verläuft. Die Länge definiert, an welchem Punkt zwischen zwei Farbstopps die mittlere Farbe des Farbverlaufs erreicht werden soll. Wenn weggelassen, ist das Mittel des Farbverlaufs der Mittelwert zwischen zwei Farbstopps.

Wie bei jedem Gradient hat ein linearer Gradient keine intrinsischen Dimensionen; d.h. er hat keine natürliche oder bevorzugte Größe und kein bevorzugtes Verhältnis. Seine konkrete Größe entspricht der Größe des Elements, auf das er angewendet wird.

Um einen linearen Gradient zu erstellen, der sich wiederholt, um seinen Container zu füllen, verwenden Sie stattdessen die Funktion repeating-linear-gradient().

Da <gradient>s zum <image> Datentyp gehören, können sie nur dort verwendet werden, wo <image>s verwendet werden können. Aus diesem Grund funktioniert linear-gradient() nicht bei background-color und anderen Eigenschaften, die den <color> Datentyp verwenden.

Ein linearer Gradient wird durch eine Achse definiert—die Gradientenlinie—und zwei oder mehr Farbstopp-Punkte. Jeder Punkt auf der Achse ist eine eigene Farbe; um einen sanften Verlauf zu erzeugen, zeichnet die linear-gradient() Funktion eine Serie von farbigen Linien, die senkrecht zur Gradientenlinie verlaufen, wobei jede der Farbe des Punktes entspricht, an dem sie die Gradientenlinie schneidet.

Die Gradientenlinie wird durch die Mitte der Box, die das Gradientenbild enthält, und durch einen Winkel definiert. Die Farben des Gradienten werden durch zwei oder mehr Punkte bestimmt: den Anfangspunkt, den Endpunkt und optional dazwischenliegende Farbstopp-Punkte.

Der Anfangspunkt ist die Position auf der Gradientenlinie, an der die erste Farbe beginnt. Der Endpunkt ist der Punkt, an dem die letzte Farbe endet. Jeder dieser beiden Punkte wird durch den Schnittpunkt der Gradientenlinie mit einer senkrechten Linie definiert, die von der Ecke der Box ausgeht, welche im selben Quadranten liegt. Der Endpunkt kann als der symmetrische Punkt des Anfangspunkts verstanden werden. Diese etwas komplexen Definitionen führen zu einem interessanten Effekt, der manchmal magische Ecken genannt wird: die Ecken, die dem Anfangs- und Endpunkt am nächsten liegen, haben dieselbe Farbe wie ihre jeweiligen Anfangs- oder Endpunkte.

Anpassen von Verläufen

Durch das Hinzufügen weiterer Farbstopp-Punkte auf der Gradientenlinie können Sie einen stark angepassten Übergang zwischen mehreren Farben erstellen. Die Position eines Farbstopps kann explizit durch die Verwendung eines <length> oder eines <percentage> festgelegt werden. Wenn Sie die Position einer Farbe nicht angeben, wird sie in der Mitte zwischen der vorhergehenden und der folgenden Farbe platziert. Die folgenden zwei Verläufe sind gleichwertig.

linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

Standardmäßig erfolgt der Übergang der Farben sanft von der Farbe eines Farbstopps zur Farbe des nachfolgenden Farbstopps, wobei der Mittelpunkt der Farbübergangs im Mittelpunkt zwischen den Farben liegt. Sie können diesen Mittelpunkt auf jede Position zwischen zwei Farbstopps verschieben, indem Sie einen nicht beschrifteten % Farbhinweis zwischen den beiden Farben hinzufügen, um anzuzeigen, wo die Mitte des Farbübergangs sein soll. Das folgende Beispiel ist von Anfang bis zum 10%-Punkt solide rot und von 90% bis zum Ende solide blau. Zwischen 10% und 90% wechselt die Farbe von Rot zu Blau, jedoch befindet sich der Mittelpunkt des Übergangs bei 30% statt bei 50%, wie es ohne den 30%-Farbhinweis der Fall gewesen wäre.

linear-gradient(red 10%, 30%, blue 90%);

Wenn zwei oder mehr Farbstopps am selben Ort liegen, wird der Übergang eine harte Linie zwischen der ersten und der letzten an diesem Ort deklarierenden Farbe sein.

Farbstopps sollten in aufsteigender Reihenfolge aufgelistet werden. Nachfolgende Farbstopps mit niedrigerem Wert überschreiben den Wert des vorherigen Farbstopps, wodurch ein harter Übergang entsteht. Die folgende Änderung erfolgt vom Rot zum Gelb bei der 40%-Marke und wechselt dann von Gelb zu Blau über 25% des Gradienten:

linear-gradient(red 40%, yellow 30%, blue 65%);

Mehrpositionen-Farbstopps sind erlaubt. Eine Farbe kann als zwei benachbarte Farbstopps deklariert werden, indem beide Positionen in der CSS-Deklaration enthalten sind. Die folgenden drei Verläufe sind gleichwertig:

linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);

Standardmäßig, wenn es keine Farbe mit einem 0% Stopp gibt, wird die zuerst deklarierte Farbe an diesem Punkt sein. Ebenso wird die letzte Farbe bis zum 100%-Punkt fortgeführt oder am 100%-Punkt sein, wenn keine Länge für diesen letzten Stopp angegeben wurde.

<linear-gradient()> = 
  linear-gradient( [ <linear-gradient-syntax> ] )  

<linear-gradient-syntax> = 
  [ <angle> | to <side-or-corner> ]? , <color-stop-list>  

<side-or-corner> = 
  [ left | right ]  ||
  [ top | bottom ]  

<color-stop-list> = 
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?  

<linear-color-stop> = 
  <color> <length-percentage>?  

<linear-color-hint> = 
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>  

<div class="shorter">shorter hue</div>
<div class="longer">longer hue</div>

div {
  height: 50vh;
  color: white;
  font-weight: bolder;
}

In diesem Beispiel für Interpolation wird das hsl Farbsystem verwendet und der hue wird interpoliert.

.shorter {
  background: linear-gradient(90deg in hsl shorter hue, red, blue);
}

.longer {
  background: linear-gradient(90deg in hsl longer hue, red, blue);
}

Die oberste Box verwendet kürzerer Interpolation, was bedeutet, dass die Farbe direkt von Rot zu Blau über den kürzeren Bogen auf dem Farbkreis wechselt. Die untere Box verwendet längere Interpolation, was bedeutet, dass die Farbe von Rot zu Blau über den längeren Bogen, durch Grüntöne, Gelbtöne und Orangetöne hindurch, übergeht.

Dieses Beispiel verwendet Mehrpositionen-Farbstopps, bei denen benachbarte Farben denselben Farbstopp-Wert haben und so einen gestreiften Effekt erzeugen.

body {
  width: 100vw;
  height: 100vh;
}

body {
  background: linear-gradient(
    to right,
    red 20%,
    orange 20% 40%,
    yellow 40% 60%,
    green 60% 80%,
    blue 80%
  );
}

Bitte schauen Sie sich die Verwendung von CSS-Gradienten für weitere Beispiele an.

• Verwendung von CSS-Gradienten
• Andere Gradientenfunktionen: repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient(), conic-gradient(), repeating-conic-gradient()
• <hue-interpolation-method>
• <color-interpolation-method>
• <image>
• CSS Bildmodul