linear-gradient()

<side-or-corner>

Die Position des Startpunkts der Gradientenlinie. Wenn 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 sind äquivalent zu den Winkeln 0deg, 180deg, 270deg und 90deg. Die anderen Werte werden in einen Winkel übersetzt.

<angle>

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

<linear-color-stop>

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

<color-hint>

Ein Hinweis zur Interpolation, der definiert, wie der Gradient zwischen angrenzenden Farbstopps verläuft. Die Länge gibt an, an welchem Punkt zwischen zwei Farbstopps die Gradientenfarbe den Mittelpunkt des Farbübergangs erreichen soll. Wenn ausgelassen, ist der Mittelpunkt des Farbübergangs der Mittelpunkt 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 und kein 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 <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 definiert—die Gradientenlinie—und zwei oder mehr Color-Stop-Punkte. Jeder Punkt auf der Achse ist eine bestimmte Farbe; um einen glatten Verlauf zu erstellen, zeichnet die linear-gradient()-Funktion eine Reihe von farbigen Linien, die senkrecht zur Gradientenlinie verlaufen, jede entspricht der Farbe des Punktes, 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 Anfangspunkt, den Endpunkt und, dazwischen, optionale Color-Stop-Punkte.

Der Anfangspunkt ist der Ort 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 Ecke der Box verläuft, die in demselben Quadranten liegt. Der Endpunkt kann als symmetrischer Punkt des Anfangspunkts verstanden werden. Diese etwas komplexen Definitionen führen zu einem interessanten Effekt, der manchmal als magische Ecken bezeichnet wird: Die den Anfangs- und Endpunkten nächstgelegenen Ecken haben die gleiche Farbe wie ihre jeweiligen Start- oder Endpunkte.

Individualisieren von Verläufen

Durch das Hinzufügen weiterer Farbstopppunkte auf der Gradientenlinie können Sie einen hochgradig 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 Standort einer Farbe nicht angeben, wird sie in der Mitte zwischen der vorhergehenden und der folgenden 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 wechseln die Farben reibungslos von der Farbe an einem Farbstopp zur Farbe am nachfolgenden Farbstopp, wobei der Mittelpunkt zwischen den Farben der Mittelpunkt des Farbübergangs ist. Sie können diesen Mittelpunkt an jede beliebige Stelle zwischen zwei Farbstopps verschieben, indem Sie einen nicht gekennzeichneten % Farbhinweis zwischen den beiden Farben hinzufügen, um anzugeben, wo der Mittelpunkt des Farbübergangs sein soll. Das folgende Beispiel ist festes Rot vom Start bis zur 10%-Marke und festes Blau von 90% bis zum Ende. Zwischen 10% und 90% wechselt die Farbe von Rot nach Blau, wobei der Mittelpunkt des Übergangs bei 30% statt 50% liegt, wie es ohne den 30%-Farbhinweis der Fall 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 den ersten und letzten an dieser Stelle deklarierten Farben sein.

Farbstopps sollten in aufsteigender Reihenfolge aufgelistet werden. Nachfolgende Farbstopps mit geringerem Wert überschreiben den Wert des vorherigen Farbstopps, wodurch ein harter Übergang erzeugt wird. Der folgende Übergang wechselt bei der 40%-Marke von Rot zu Gelb und dann über 25% des Gradienten von Gelb zu Blau:

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

Mehrpositionen-Farbstopps sind zulässig. Eine Farbe kann als zwei benachbarte Farbstopps angegeben werden, indem beide Positionen in der CSS-Deklaration enthalten sind. 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 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 bei der 100%-Marke sein, wenn keine Länge an diesem 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 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 Box oben verwendet die kürzere Interpolation, was bedeutet, dass die Farbe direkt von Rot zu Blau geht und den kürzeren Bogen auf dem Farbkreis nutzt. Die Box unten verwendet die längere Interpolation, was bedeutet, dass die Farbe von Rot zu Blau über den längeren Bogen verläuft und durch Grün, Gelb und Orange zieht.

Dieses Beispiel verwendet Multi-Position-Farbstopps, wobei benachbarte Farben den gleichen Farbstoppwert haben, wodurch ein Streifeneffekt entsteht.

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 Gradient-Funktionen: repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient(), conic-gradient(), repeating-conic-gradient()
• <hue-interpolation-method>
• <color-interpolation-method>
• <image>
• CSS Bilder Modul