linear-gradient()

<side-or-corner>

Die Position des Startpunkts der Gradientenlinie. Falls angegeben, besteht es 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. Falls nicht angegeben, ist die Standardeinstellung to bottom.

Die Werte to top, to bottom, to left und to right entsprechen den Winkeln 0deg, 180deg, 270deg bzw. 90deg. Die anderen Werte werden in einen Winkel umgerechnet.

<angle>

Der Winkel der Gradientenlinie. Ein Wert von 0deg entspricht to top; zunehmende Werte rotieren im Uhrzeigersinn davon aus.

<linear-color-stop>

Ein Farbhaltepunkt-Wert <color>, gefolgt von ein oder zwei optionalen Stopppositionen (jeweils entweder ein <percentage> oder eine <length> entlang der Gradientenachse).

<color-hint>

Ein Interpolations-Hinweis, der definiert, wie der Verlauf zwischen angrenzenden Farbhaltepunkten fortschreitet. Die Länge definiert, an welchem Punkt zwischen zwei Farbhaltepunkten die Farbe des Verlaufs den Mittelpunkt des Farbwechsels erreichen soll. Fehlt dieser, ist der Mittelpunkt des Farbwechsels der Mittelpunkt zwischen zwei Farbhaltepunkten.

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 wird der Größe des Elements, auf das es angewendet wird, entsprechen.

Um einen linearen Verlauf zu erstellen, der zur Füllung seines Containers wiederholt wird, verwenden Sie stattdessen die Funktion repeating-linear-gradient().

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 bei background-color und anderen Eigenschaften, die den Datentyp <color> verwenden.

Ein linearer Gradient wird durch eine Achse definiert — die Gradientenlinie — und zwei oder mehr _Farbhaltepunkt-_Positionen. Jeder Punkt auf der Achse ist eine andere Farbe; um einen glatten Verlauf zu schaffen, zeichnet die linear-gradient()-Funktion eine Reihe von farbigen Linien, die senkrecht zur Gradientenlinie stehen, wobei jede die Farbe des Punktes annimmt, an dem sie die Gradientenlinie kreuzt.

Die Gradientenlinie wird durch das Zentrum des den Gradienten enthaltenden Rahmens und einen Winkel definiert. Die Farben des Verlaufs werden durch zwei oder mehr Punkte bestimmt: den Startpunkt, den Endpunkt und dazwischen optionale Farbhaltepunkte.

Der Startpunkt ist die Position auf der Gradientenlinie, an der 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 von der Ecke des Rahmens verläuft, welche sich im gleichen Quadranten befindet. Der Endpunkt kann als symmetrischer Punkt des Startpunktes verstanden werden. Diese etwas komplexen Definitionen führen zu einem interessanten Effekt, der manchmal als magische Ecken bezeichnet wird: die Ecken, die dem Start- und Endpunkt am nächsten sind, haben dieselbe Farbe wie ihre jeweiligen Start- oder Endpunkte.

Anpassen von Verläufen

Durch Hinzufügen weiterer Farbhaltepunkte auf der Gradientenlinie können Sie einen hochgradig angepassten Übergang zwischen mehreren Farben erstellen. Die Position eines Farbhaltepunktes kann explizit durch eine <length> oder ein <percentage> definiert werden. Wenn Sie den Ort einer Farbe nicht spezifizieren, wird sie auf halbem Weg 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 erfolgt der Farbverlauf nahtlos von der Farbe an einem Farbhaltepunkt zur Farbe am darauffolgenden Farbhaltepunkt, wobei der Mittelpunkt zwischen den Farben der Mittelpunkt des Farbwechsels ist. Sie können diesen Mittelpunkt an jede Position zwischen zwei Farbhaltepunkten verschieben, indem Sie ein unbeschriftetes %-Farbhinweis zwischen den beiden Farben hinzufügen, um anzuzeigen, wo die Mitte des Farbwechsels sein soll. Im folgenden Beispiel ist das Bild von Anfang bis zur 10%-Marke solid rot und von 90% bis zum Ende solid blau. Zwischen 10% und 90% wechselt die Farbe von Rot zu Blau, wobei der Mittelpunkt des Wechsels an der 30%-Marke und nicht bei 50% liegt, wie es ohne das 30%-Farbhinweis passiert wäre.

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

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

Farbhaltepunkte sollten in aufsteigender Reihenfolge aufgelistet werden. Nachfolgende niedrigere Farbhaltepunkte überschreiben den Wert des vorherigen Farbhaltepunktes und erzeugen einen harten Übergang. Das Folgende ändert sich bei der 40%-Marke von Rot zu Gelb und wechselt dann von Gelb zu Blau über 25% des Verlaufs:

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

Mehrere Positionen für Farbhaltepunkte sind erlaubt. Eine Farbe kann als zwei benachbarte Farbhaltepunkte 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, wenn keine Farbe mit einem 0%-Halt angegeben ist, ist die erste deklarierte Farbe an diesem Punkt. Ebenso wird die letzte Farbe bis zur 100%-Marke fortgesetzt oder an der 100%-Marke sein, wenn keine Länge an diesem letzten Halt angegeben 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-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 wechselt, indem der kürzere Bogen auf dem Farbkreis verwendet wird. Die untere Box verwendet die längere Interpolation, was bedeutet, dass die Farbe von Rot zu Blau über den längeren Bogen wechselt und dabei durch Grüntöne, Gelb und Orange geht.

Dieses Beispiel verwendet Farbhaltepunkte mit mehreren Positionen, bei denen angrenzende Farben denselben Farbhalbwert haben und so einen Streifeneffekt schaffen.

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-Verläufen für weitere Beispiele an.

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