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) 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 entsprechen den Winkeln 0deg, 180deg, 270deg und 90deg. Die anderen Werte werden in einen Winkel übersetzt.

<angle>

Der Winkel der Richtung der Verlaufslinie. Ein Wert von 0deg entspricht to top; zunehmende Werte drehen sich von dort aus im Uhrzeigersinn.

<linear-color-stop>

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

<color-hint>

Ein Interpolation Hinweis, der definiert, wie der Verlauf zwischen benachbarten Farbverlaufspunkten fortschreitet. Die Länge definiert, an welchem Punkt zwischen zwei Farbverlaufspunkten die Verlausfarbe den Mittelwert des Farbübergangs erreichen sollte. Wird sie weggelassen, ist der Mittelwert des Farbübergangs der Mittelwert zwischen zwei Farbverlaufspunkten.

Wie bei jedem Verlauf hat ein Linearverlauf keine intrinsischen Dimensionen; das heißt, er hat keine natürliche oder bevorzugte Größe und kein bevorzugtes Verhältnis. Seine konkrete Größe passt sich der Größe des Elements an, auf das er angewendet wird.

Um einen linearen Verlauf zu erzeugen, der sich wiederholt, um seinen Behälter zu füllen, verwenden Sie 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 mit background-color und anderen Eigenschaften, die den <color> Datentyp verwenden.

Ein linearer Verlauf wird durch eine Achse definiert—die Verlaufslinie—und zwei oder mehr Farbverlaufspunkte. Jeder Punkt auf der Achse ist eine eigene Farbe; um einen sanften Verlauf zu erzeugen, zeichnet die linear-gradient() Funktion eine Reihe von Farbstrichen, die senkrecht zur Verlaufslinie verlaufen, wobei jeder Strich der Farbe des Punktes entspricht, an dem er die Verlaufslinie schneidet.

Die Verlaufslinie wird durch das Zentrum der Box bestimmt, die das Verlaufsbild enthält, und durch einen Winkel. Die Farben des Verlaufs werden durch zwei oder mehr Punkte bestimmt: den Startpunkt, den Endpunkt und dazwischen optionale Farbverlaufspunkte.

Der Startpunkt ist der Ort auf der Verlaufslinie, an dem 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 bestimmt, die von der Eckbox kommt, die sich im selben Quadranten befindet. Der Endpunkt kann als symmetrischer Punkt des Startpunkts verstanden werden. Diese etwas komplexen Definitionen führen zu einem interessanten Effekt, der manchmal magische Ecken genannt wird: die Ecken, die den Start- und Endpunkten am nächsten liegen, haben dieselbe Farbe wie ihre jeweiligen Start- oder Endpunkte.

Anpassen von Verläufen

Durch Hinzufügen weiterer Farbverlaufspunkte auf der Verlaufslinie können Sie einen höchst individuell gestalteten Übergang zwischen mehreren Farben erstellen. Die Position eines Farbverlaufs kann explizit durch die Verwendung eines <length> oder eines <percentage> definiert werden. Wenn Sie die Position einer Farbe nicht angeben, wird sie genau 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 verlaufen die Farben sanft von der Farbe an einem Farbverlaufspunkt zur Farbe am folgenden Farbverlaufspunkt, wobei der Mittelwert zwischen den Farben der Halbpunkt des Farbübergangs ist. Sie können diesen Mittelwert an jede Position zwischen zwei Farbverlaufspunkten verschieben, indem Sie einen unbeschrifteten % Farbhinweis zwischen den beiden Farben hinzufügen, um anzugeben, wo das Zentrum des Farbübergangs sein soll. Das folgende Beispiel ist von Anfang bis zur 10%-Markierung durchgehend rot und von 90% bis zum Ende durchgehend blau. Zwischen 10% und 90% wechselt die Farbe von rot zu blau, jedoch ist der Mittelpunkt des Übergangs an der 30%-Marke anstatt bei 50%, wie es ohne den 30% Farbhinweis der Fall gewesen wäre.

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

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

Farbverlaufspunkte sollten in aufsteigender Reihenfolge aufgelistet werden. Nachfolgende Farbverlaufspunkte mit niedrigeren Werten überschreiben den Wert des vorherigen Farbverlaufs, wodurch ein harter Übergang entsteht. Folgendes Beispiel wechselt bei der 40%-Markierung von rot zu gelb und geht dann in einem Übergang von gelb zu blau über 25% des Verlaufs über:

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

Farbverläufe mit mehreren Positionen sind erlaubt. Eine Farbe kann als zwei aneinandergrenzende Farbverläufe deklariert werden, indem beide Positionen in der CSS-Deklaration angegeben 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 wird, wenn keine Farbe mit einem 0% Stopp angegeben ist, die zuerst deklarierte Farbe an diesem Punkt sein. Ebenso wird die letzte Farbe bis zur 100%-Markierung weitergeführt oder an dieser liegen, wenn keine Länge für diesen letzten Stopp 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 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);
}

Das obere Kästchen verwendet kürzere Interpolation, was bedeutet, dass die Farbe direkt von rot nach blau über den kürzeren Bogen auf dem Farbkreis geht. Das untere Kästchen verwendet längere Interpolation, bedeutet, dass die Farbe von rot nach blau über den längeren Bogen geht, durchläuft Grün, Gelb und Orange.

Dieses Beispiel verwendet mehrpositionale Farbverläufe, wobei angrenzende Farben denselben Farbverlaufpunkt haben und so 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 Verläufen für mehr 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-Bilder Modul