linear-gradient()

<side-or-corner>

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

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

<angle>

Der Winkel der Verlaufslinie. Ein Wert von 0deg entspricht to top; aufsteigende Werte rotieren im Uhrzeigersinn von dort aus.

<linear-color-stop>

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

<color-hint>

Ein Interpolationshinweis, der definiert, wie der Verlauf zwischen benachbarten Farbstopps fortschreitet. Die Länge definiert, an welchem Punkt zwischen zwei Farbstopps die Verlauffarbe die Mitte der Farbüberblendung erreichen sollte. Wird dies weggelassen, ist der Mittelpunkt der Farbüberblendung die Mitte zwischen zwei Farbstopps.

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

Um einen linearen Verlauf 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 Verlauf wird durch eine Achse – die Verlaufslinie – und zwei oder mehr Farbstopp-Punkte definiert. Jeder Punkt auf der Achse hat eine unterschiedliche Farbe; um einen glatten Verlauf zu erzeugen, zeichnet die linear-gradient() Funktion eine Reihe von farbigen Linien, die senkrecht zur Verlaufslinie stehen und jeweils die Farbe des Punktes annehmen, an dem sie die Verlaufslinie schneiden.

Die Verlaufslinie wird durch die Mitte des Kastens, der das Verlaufbild enthält, und durch einen Winkel definiert. Die Farben des Verlaufs werden durch zwei oder mehr Punkte bestimmt: den Startpunkt, den Endpunkt und dazwischen optionale Farbstopppunkte.

Der Startpunkt ist die Stelle auf der Verlaufslinie, 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 Verlaufslinie mit einer senkrechten Linie definiert, die vom Box-Eckpunkt vorbeiführt, der sich im gleichen Quadranten befindet. Der Endpunkt kann als symmetrischer Punkt des Startpunkts verstanden werden. Diese recht komplexen Definitionen führen zu einem interessanten Effekt, der manchmal magische Ecken genannt wird: Die Ecken, die dem Start- und Endpunkt am nächsten sind, haben die gleiche Farbe wie ihre jeweiligen Start- bzw. Endpunkte.

Anpassung von Verläufen

Durch Hinzufügen zusätzlicher Farbstopppunkte auf der Verlaufslinie können Sie einen sehr angepassten Übergang zwischen mehreren Farben erstellen. Eine Position eines Farbstopps kann explizit durch die Verwendung eines <length> oder eines <percentage> definiert werden. Wenn Sie die Position einer Farbe nicht angeben, wird sie zwischen der vorhergehenden und der folgenden Farbe in der Mitte platziert. Die folgenden beiden Verläufe sind äquivalent.

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

Standardmäßig wechseln die Farben gleichmäßig von der Farbe eines Farbstopps zur Farbe des anschließenden Farbstopps, wobei die Mitte zwischen den Farben die halbe Strecke des Farbwechsels darstellt. Sie können diesen Mittelpunkt an eine beliebige Position zwischen zwei Farbstopps verschieben, indem Sie einen unbeschrifteten % Farbhinweis zwischen zwei Farben hinzufügen, der angibt, wo der Mittelpunkt des Farbwechsels liegen sollte. Das folgende Beispiel ist von Anfang bis zur 10%-Marke rot und von 90% bis zum Ende blau. Zwischen 10% und 90% wechselt die Farbe von Rot zu Blau; der Mittelpunkt des Farbwechsels liegt jedoch bei der 30%-Marke anstelle von 50%, wie es ohne den 30% Farbhinweis der Fall gewesen wäre.

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

Wenn zwei oder mehr Farbstopps an derselben Position liegen, erfolgt der Übergang als harter Schnitt zwischen den ersten und letzten Farben, die an dieser Position deklariert wurden.

Farbstopps sollten in aufsteigender Reihenfolge aufgelistet werden. Nachfolgende Farbstopps mit niedrigerem Wert überschreiben den Wert des vorhergehenden Farbstopps und schaffen einen harten Übergang. Folgendes ändert sich von Rot zu Gelb bei der 40%-Marke und geht dann von Gelb zu Blau über 25% des Verlaufs über:

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

Multi-Position-Farbstopps sind zulässig. Eine Farbe kann als zwei benachbarte Farbstopps deklariert werden, indem beide Positionen in der CSS-Deklaration angegeben werden. Die folgenden drei Verläufe sind äquivalent:

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 keine Farbe mit einem 0% Stopp vorhanden ist, wird die erste erklärte Farbe an diesem Punkt sein. Ebenso wird die letzte Farbe bis zur 100%-Marke fortgesetzt oder an der 100%-Marke sein, wenn bei diesem letzten Stopp keine Länge deklariert 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 zur Interpolation wird das HSL Farbsystem verwendet und der Farbton 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 obere Box verwendet kürzere Interpolation, was bedeutet, dass die Farbe direkt von Rot zu Blau über den kürzeren Bogen auf dem Farbkreis wechselt. Die Box unten verwendet längere Interpolation, was bedeutet, dass die Farbe von Rot zu Blau über den längeren Bogen wechselt, welcher über Grün, Gelb und Orange führt.

Dieses Beispiel verwendet Farbstopps an mehreren Positionen, wobei benachbarte Farben denselben Farbstoppwert aufweisen 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 sehen Sie die Verwendung von CSS-Verläufen für weitere Beispiele.

• Verwendung von CSS-Verläufen
• Andere Verlauf-Funktionen: repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient(), conic-gradient(), repeating-conic-gradient()
• <hue-interpolation-method>
• <color-interpolation-method>
• <image>
• CSS-Bildermodul