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 an (left oder right), das andere die vertikale Seite (top oder bottom). Die Reihenfolge der Seiten-Schlüsselwörter spielt keine Rolle. Wird nichts angegeben, wird to bottom als Standardwert verwendet.

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 Gradientenlinie. Ein Wert von 0deg entspricht to top; höhere Werte drehen sich von dort im Uhrzeigersinn.

<linear-color-stop>

Ein Farb-Stoppwert <color>, gefolgt von ein oder zwei optionalen Stopp-Positionen, die entweder ein <percentage> oder eine <length> entlang der Gradientenachse sind.

<color-hint>

Ein Interpolation-Hinweis, der definiert, wie der Gradient zwischen benachbarten Farbstopps verläuft. Die Länge gibt an, an welchem Punkt zwischen zwei Farbstopps der Farbverlauf die Mitte des Farbwechsels erreichen soll. Wird nichts angegeben, ist die Mitte des Farbwechsels die Mitte zwischen zwei Farbstopps.

Wie bei jedem Gradienten hat ein linearer Gradient 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 Gradient zu erstellen, der sich wiederholt, um seinen Container zu füllen, verwenden Sie stattdessen die repeating-linear-gradient() Funktion.

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 – die Gradientenlinie – und zwei oder mehr Farbstoppunkte definiert. Jeder Punkt auf der Achse ist eine eigene Farbe; um einen sanften Übergang zu erzeugen, zeichnet die linear-gradient() Funktion eine Reihe von farbigen Linien senkrecht zur Gradientenlinie, wobei jede die Farbe des Punktes hat, an dem sie die Gradientenlinie schneidet.

Die Gradientenlinie wird durch das Zentrum der Box, die das Gradientenbild enthält, und durch einen Winkel definiert. Die Farben des Gradienten werden durch zwei oder mehr Punkte bestimmt: dem Startpunkt, dem Endpunkt und dazwischen optionalen Farbstoppunkten.

Der Startpunkt ist der Punkt auf der Gradientenlinie, an dem die erste Farbe beginnt. Der Endpunkt ist der Punkt, an dem die letzte Farbe endet. Jeder dieser beiden Punkte wird durch die Kreuzung der Gradientenlinie mit einer senkrechten Linie definiert, die von der Box-Ecke verläuft, die sich im gleichen Quadranten 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 die gleiche Farbe wie ihre jeweiligen Start- oder Endpunkte.

Anpassen von Gradienten

Durch das Hinzufügen weiterer Farbstoppunkte auf der Gradientenlinie können Sie einen stark angepassten Übergang zwischen mehreren Farben erstellen. Die Position eines Farbstopps kann explizit mit einer <length> oder einem <percentage> definiert werden. Wenn Sie den Standort einer Farbe nicht angeben, wird sie in der Mitte zwischen der vorhergehenden und der folgenden platziert. Die folgenden zwei Gradienten sind gleichwertig.

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

Standardmäßig verlaufen die Farben reibungslos von der Farbe an einem Farbstopp zur Farbe am nächsten Farbstopp, wobei der Mittelpunkt zwischen den Farben der Mittelpunkt des Farbübergangs ist. Sie können diesen Mittelpunkt an jede Position zwischen zwei Farbstopps verschieben, indem Sie einen nicht etikettierten % Farbhinweis zwischen den beiden Farben hinzufügen, um anzuzeigen, wo die Mitte des Farbübergangs sein soll. Das folgende Beispiel ist fest rot vom Anfang bis zur 10%-Marke und fest blau von 90% bis zum Ende. Zwischen 10% und 90% wechselt die Farbe von rot zu blau, jedoch ist der Mittelpunkt des Übergangs bei der 30%-Marke anstatt 50%, wie es ohne den 30% Farbhinweis geschehen wäre.

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

Wenn zwei oder mehr Farbstopps an dieselbe Position gesetzt werden, wird der Übergang eine harte Linie zwischen der ersten und der letzten an dieser Stelle angegebenen Farbe sein.

Farbstopps sollten in aufsteigender Reihenfolge aufgeführt werden. Nachfolgende Farbstopps mit niedrigerem Wert überschreiben den Wert des vorherigen Farbstopps und erzeugen einen harten Übergang. Das folgende Beispiel wechselt an der 40%-Marke von rot zu gelb und wechselt dann über 25% des Gradienten von gelb zu blau:

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

Mehrpositionen-Farbstopps sind erlaubt. Eine Farbe kann als zwei benachbarte Farbstopps erklärt werden, indem beide Positionen in der CSS-Deklaration angegeben werden. Die folgenden drei Gradienten 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 erste deklarierte Farbe an diesem Punkt sein. Ebenso wird die letzte Farbe bis zur 100%-Marke fortgesetzt oder an der 100%-Marke liegen, wenn keine Länge an diesem 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 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 untere Box verwendet längere Interpolation, was bedeutet, dass die Farbe von rot zu blau über den längeren Bogen wechselt und dabei durch Grün, Gelb und Orange verläuft.

Dieses Beispiel verwendet Mehrpositionen-Farbstopps, wobei benachbarte Farben denselben Farbstopp-Wert haben und einen Streifeneffekt 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 Verwendung von CSS-Gradienten für weitere Beispiele.

• 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-Bilder-Modul