linear-gradient()

<side-or-corner>

Die Position des Startpunkts der Gradientenlinie. 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 Seitenbegriffe spielt keine Rolle. Wenn nicht 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. Die anderen Werte werden in einen Winkel umgewandelt.

<angle>

Der Richtungswinkel der Gradientenlinie. Ein Wert von 0deg entspricht to top; steigende Werte drehen sich von dort aus im Uhrzeigersinn.

<linear-color-stop>

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

<color-hint>

Ein Interpolations hinweis, der angibt, wie sich der Gradient zwischen benachbarten Farbstops weiterentwickelt. Die Länge bestimmt, an welchem Punkt zwischen zwei Farbstops die Gradientenfarbe den Mittelpunkt des Farbübergangs erreichen sollte. Wenn weggelassen, ist der Mittelpunkt des Farbübergangs der Mittelpunkt zwischen zwei Farbstops.

Wie bei jedem Gradienten hat ein linearer Gradient keine intrinsischen Abmessungen; das heißt, er hat keine natürliche oder bevorzugte Größe und kein bevorzugtes Seitenverhä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 und seinen Behälter füllt, verwenden Sie 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 auf background-color und anderen Eigenschaften, die den <color> Datentyp verwenden.

Ein linearer Gradient wird durch eine Achse definiert – die Gradientenlinie – und zwei oder mehr Farb-Stopp-Punkte. Jeder Punkt auf der Achse ist eine eigene Farbe; um einen glatten Übergang zu schaffen, zeichnet die linear-gradient() Funktion eine Reihe farbiger Linien senkrecht zur Gradientenlinie, von denen jede die Farbe des Punktes annimmt, 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: den Startpunkt, den Endpunkt und gegebenenfalls optionale Farb-Stopp-Punkte dazwischen.

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 Schnittstelle der Gradientenlinie mit einer senkrechten Linie definiert, die aus der Eckbox kommt, die sich im gleichen Quadranten befindet. Der Endpunkt kann als symmetrischer Punkt des Startpunkts gesehen 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 liegen, haben dieselbe Farbe wie ihre jeweiligen Start- oder Endpunkte.

Anpassung von Gradienten

Durch Hinzufügen weiterer Farb-Stopp-Punkte auf der Gradientenlinie können Sie einen hochgradig angepassten Übergang zwischen mehreren Farben erstellen. Die Position eines Farb-Stops kann explizit durch die Verwendung eines <length> oder eines <percentage> definiert werden. Wenn Sie den Standort einer Farbe nicht angeben, wird sie auf halbem Weg zwischen jener platziert, die ihr vorausgeht, und jener, die ihr folgt. 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 erfolgt der Farbverlauf sanft von der Farbe an einem Farb-Stopp zur Farbe am nachfolgenden Farb-Stopp, wobei der Mittelpunkt zwischen den Farben der halbe Wegpunkt zwischen dem Farbverlauf ist. Sie können diesen Mittelpunkt an jede Stelle zwischen zwei Farb-Stops verschieben, indem Sie einen unbeschrifteten % Farbhinweis zwischen den beiden Farben hinzufügen, um anzugeben, wo der Mittelpunkt des Farbverlaufs liegen soll. Im folgenden Beispiel ist es von Anfang bis zur 10% Marke ein starkes Rot und von 90% bis zum Ende ein starkes Blau. Zwischen 10% und 90% erfolgt der Übergang von Rot zu Blau, wobei der Mittelpunkt des Übergangs jedoch bei der 30% Marke liegt anstatt bei 50%, wie ohne die 30% Farbhinweis.

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

Wenn zwei oder mehr Farb-Stops an derselben Stelle liegen, wird der Übergang eine harte Linie zwischen der ersten und der letzten an dieser Stelle deklarierten Farbe sein.

Farb-Stops sollten in aufsteigender Reihenfolge aufgelistet werden. Nachfolgende Farb-Stops mit niedrigerem Wert überschreiben den Wert des vorhergehenden Farb-Stops und erzeugen einen harten Übergang. Das folgende Beispiel wechselt an der 40% Marke von Rot zu Gelb und geht dann über 25% des Gradients von Gelb zu Blau über:

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

Mehrpositionen-Farb-Stops sind erlaubt. Eine Farbe kann als zwei benachbarte Farb-Stops durch das Einbeziehen beider Positionen in die CSS-Deklaration deklariert 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 keine Farbe mit einem 0% Stopp vorhanden ist, wird die erste deklarierte Farbe an dieser Stelle sein. Ebenso wird die letzte Farbe bis zur 100% Marke fortgesetzt oder an der 100% Marke sein, wenn an 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 Interpolationsbeispiel 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 die kürzere Interpolation, was bedeutet, dass die Farbe direkt von Rot zu Blau mit der kürzeren Bogen auf dem Farbkreis geht. Die untere Box verwendet die längere Interpolation, was bedeutet, dass die Farbe von Rot zu Blau über den längeren Bogen geht, indem sie durch Grüntöne, Gelbtöne und Orangetöne verläuft.

Dieses Beispiel verwendet Mehrpositionen-Farb-Stops, wobei benachbarte Farben denselben Farb-Stopp-Wert haben, was einen streifenförmigen Effekt erzeugt.

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 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 Images Modul