linear-gradient()

<side-or-corner>

Die Position des Startpunktes der Liniengradienten. Wenn angegeben, besteht es aus dem Wort to und bis zu zwei Schlüsselwörtern: Eines gibt die horizontale Seite an (left oder right), und das andere die vertikale Seite (top oder bottom). 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 entsprechen den Winkeln 0deg, 180deg, 270deg und 90deg. Andere Werte werden in einen Winkel übersetzt.

<angle>

Der Winkel der Gradientlinie. Ein Wert von 0deg entspricht to top; steigende Werte drehen sich von dort im Uhrzeigersinn.

<linear-color-stop>

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

<color-hint>

Ein Interpolations-Hinweis, der definiert, wie der Verlauf zwischen den benachbarten Farbstopps voranschreitet. Die Länge definiert, an welchem Punkt zwischen zwei Farbstopps die Verlauf-Farbe den Mittelpunkt der Farbüberblendung erreichen soll. Wenn weggelassen, ist der Mittelpunkt der Farbüberblendung der Mittelpunkt zwischen zwei Farbstopps.

Wie bei jedem Verlauf hat ein linearer Verlauf keine intrinsischen Abmessungen, d.h. es gibt 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 repeating-linear-gradient() Funktion.

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

Ein linearer Verlauf wird durch eine Achse definiert — die Verlaufsachse — und zwei oder mehr Farbstopps. Jeder Punkt auf der Achse ist eine spezifische Farbe; um einen gleichmäßigen Verlauf zu erzeugen, zieht die linear-gradient() Funktion eine Reihe von farbigen Linien, die senkrecht zur Verlaufsachse stehen und an jedem Punkt der Achse die Farbe annehmen, wo sie die Verlaufsachse schneiden.

Die Verlaufslinie wird durch das Zentrum des Kastens, der das Verlaufsbild 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 zwei Punkte wird durch den Schnittpunkt der Verlaufslinie mit einer Linie definiert, die senkrecht von der Ecke des Kästchens verläuft, die sich in derselben Quadrante befindet. Der Endpunkt kann als der symmetrische Punkt des Startpunkts verstanden werden. Diese etwas komplexen Definitionen führen zu einem interessanten Effekt, der manchmal als magische Ecken bezeichnet wird: Die Ecken, die den Start- und Endpunkten am nächsten sind, haben dieselbe Farbe wie ihre jeweiligen Start- oder Endpunkte.

Anpassung von Verläufen

Durch das Hinzufügen weiterer Farbstopps auf der Verlaufslinie 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> definiert werden. Wenn Sie den Ort einer Farbe nicht angeben, wird sie in der Mitte zwischen den vorhergehenden und nachfolgenden Farben 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 Farben sanft von der Farbe an einem Farbstopppunkt zur Farbe am nächsten Farbstopppunkt, wobei der Mittelpunkt zwischen den Farben der halbe Weg der Farbüberblendung zwischen den beiden Punkten ist. Sie können diesen Mittelpunkt an jede Position zwischen zwei Farbstopps verschieben, indem Sie einen unlabelelden % Farbhinweis zwischen den beiden Farben hinzufügen, um anzuzeigen, wo der Mittelpunkt des Farbübergangs liegen soll. Das folgende Beispiel ist von Anfang an bis zur 10 %-Marke durchgehend rot und von 90 % bis zum Ende durchgehend blau. Zwischen 10 % und 90 % wechselt die Farbe von Rot zu Blau, jedoch liegt der Mittelpunkt des Übergangs bei der 30 %-Marke statt bei 50 %, was ohne den 30 % Farbhinweis passiert wäre.

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

Wenn zwei oder mehr Farbstopps an derselben Stelle sind, wird der Übergang eine harte Linie zwischen der ersten und letzten Farbangabe an dieser Stelle sein.

Farbstopps sollten in aufsteigender Reihenfolge aufgelistet werden. Nachfolgende Farbstopps mit niedrigerem Wert überschreiben den Wert des vorhergehenden Farbstopps, wodurch ein harter Übergang entsteht. Im folgenden Beispiel ändert sich die Farbe von Rot zu Gelb an der 40 %-Marke und wechselt dann von Gelb zu Blau über 25 % des Verlaufs:

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

Multi-Position-Farbstopps sind erlaubt. Eine Farbe kann als zwei benachbarte Farbstopps erklärt werden, indem beide Positionen in der CSS-Deklaration eingeschlossen werden. 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 keine Farbe mit einem 0%-Stopp vorhanden ist, wird die zuerst deklarierte Farbe an diesem Punkt sein. In ähnlicher Weise wird die letzte Farbe bis zur 100%-Marke fortgesetzt oder bei der 100%-Marke sein, wenn auf diesem letzten Stopp keine Länge deklariert wurde.

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

<linear-gradient-syntax> = 
  [ <angle> | <zero> | 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 die Interpolation wird das [HSL]-Farbmodell (/de/docs/Web/CSS/color_value/hsl) 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);
}

Das obere Kästchen verwendet die kurzeren Interpolation, das heißt, die Farbe wechselt direkt von Rot zu Blau unter Verwendung des kürzeren Bogens auf dem Farbkreis. Das untere Kästchen verwendet die längere Interpolation, das heißt, die Farbe wechselt von Rot zu Blau, indem sie den längeren Bogen durchläuft und dabei durch Grüns, Gelbs und Oranges geht.

Dieses Beispiel verwendet Multi-Position-Farbstopps, wobei benachbarte Farben denselben Farbstopppunkt haben und 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 sich die Verwendung von CSS-Verläufen für weitere Beispiele an.

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