linear-gradient()

Probieren Sie es aus

background: linear-gradient(#e66465, #9198e5);

background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);

background: linear-gradient(
  to left,
  #333333,
  #333333 50%,
  #eeeeee 75%,
  #333333 75%
);

background:
  linear-gradient(217deg, rgb(255 0 0 / 0.8), transparent 70.71%),
  linear-gradient(127deg, rgb(0 255 0 / 0.8), transparent 70.71%),
  linear-gradient(336deg, rgb(0 0 255 / 0.8), transparent 70.71%);

<section class="display-block" id="default-example">
  <div id="example-element"></div>
</section>

#example-element {
  min-height: 100%;
}

Syntax

/* A gradient with a single color of red */
linear-gradient(red)

/* A gradient tilted 45 degrees,
   starting blue and finishing red */
linear-gradient(45deg, blue, red)

/* A gradient going from the bottom right to the top left corner,
   starting blue and finishing red */
linear-gradient(to left top, blue, red)

/* Interpolation in rectangular color space */
linear-gradient(in oklab, blue, red)

/* Interpolation in polar color space */
linear-gradient(in hsl, blue, red)

/* Interpolation in polar color space
  with longer hue interpolation method */
linear-gradient(in hsl longer hue, blue, red)

/* Color stop: A gradient going from the bottom to top,
   starting blue, turning green at 40% of its length,
   and finishing red */
linear-gradient(0deg, blue, green 40%, red)

/* Color hint: A gradient going from the left to right,
   starting red, getting to the midpoint color
   10% of the way across the length of the gradient,
   taking the rest of the 90% of the length to change to blue */
linear-gradient(.25turn, red, 10%, blue)

/* Multi-position color stop: A gradient tilted 45 degrees,
   with a red bottom-left half and a blue top-right half,
   with a hard line where the gradient changes from red to blue */
linear-gradient(45deg, red 0 50%, blue 50% 100%)

Werte

<side-or-corner>

Die Position des Startpunkts der Gradientenlinie. Falls angegeben, besteht er 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 Seitenschlüsselwörter spielt keine Rolle. Wenn nicht angegeben, wird to bottom als Standard 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 übersetzt.

<angle>

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

<linear-color-stop>

Ein Farb-Stopp Wert aus <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 benachbarten Farbstopps fortschreitet. Die Länge legt fest, an welchem Punkt zwischen zwei Farbstopps der Gradient die Mitte des Farbwechsels erreichen soll. Wenn weggelassen, ist die Mitte des Farbwechsels der Mittelpunkt zwischen zwei Farbstopps.

Beschreibung

Wie bei jedem Gradient hat ein linearer Gradient keine intrinsischen Maße; 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 entsprechen, auf das er angewendet wird.

Um einen linearen Gradient zu erstellen, der sich wiederholt, um seinen Container auszufüllen, verwenden Sie stattdessen die Funktion repeating-linear-gradient().

Da <gradient>s dem <image> Datentyp angehö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.

Zusammensetzung eines linearen Gradienten

Ein linearer Gradient wird durch eine Achse definiert—die Gradientenlinie—und zwei oder mehr Farb-Stopp-Punkte. Jeder Punkt auf der Achse ist eine unterscheidbare Farbe; um einen glatten Gradient zu erzeugen, zeichnet die Funktion linear-gradient() eine Serie von farbigen Linien, die senkrecht zur Gradientenlinie stehen, wobei jede Linie die Farbe des Punkts hat, an dem sie die Gradientenlinie schneidet.

Die Gradientenlinie wird durch das Zentrum des Kastens definiert, der das Gradientbild enthält, und durch einen Winkel. Die Farben des Gradienten werden durch zwei oder mehr Punkte bestimmt: den Startpunkt, den Endpunkt und dazwischen mögliche Farb-Stopp-Punkte.

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. Diese beiden Punkte werden durch den Schnittpunkt der Gradientenlinie mit einer senkrechten Linie definiert, die von der Ecke des Kastens verläuft, welche im gleichen Quadranten liegt. 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.

Anpassung von Gradienten

Indem Sie mehr Farb-Stopp-Punkte auf der Gradientenlinie hinzufügen, können Sie einen hochgradig angepassten Übergang zwischen mehreren Farben erstellen. Die Position eines Farb-Stopp-Punkts kann explizit durch die Verwendung eines <length> oder eines <percentage> definiert werden. Wenn Sie die Position 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 wechseln die Farben reibungslos von der Farbe an einem Farb-Stopp zum nächsten Farb-Stopp, wobei die Mitte des Farbwechsels der halbe Punkt des Farbwechsels ist. Sie können diesen Mittelpunkt an jede Position zwischen zwei Farbstopps verschieben, indem Sie zwischen den beiden Farben einen unausgezeichneten % Farb-Hinweis hinzufügen, um anzuzeigen, wo der Mittelpunkt des Farbwechsels sein sollte. Das folgende Beispiel ist von Anfang bis zur 10%-Markierung in festem Rot und ab 90% bis zum Ende in festem Blau. Zwischen 10% und 90% wechselt die Farbe von Rot zu Blau, jedoch ist der Mittelpunkt des Übergangs bei der 30%-Markierung anstelle von 50%, wie es ohne den 30% Farb-Hinweis gewesen wäre.

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

Wenn zwei oder mehr Farbstopps sich an derselben Position befinden, wird der Übergang eine harte Linie zwischen der ersten und letzten an dieser Position angegebenen Farbe sein.

Farbstopps sollten in aufsteigender Reihenfolge aufgeführt werden. Nachfolgende Farbstopps mit niedrigeren Werten überschreiben den Wert des vorherigen Farbstopps und erzeugen einen harten Übergang. Das Folgende wechselt bei der 40%-Markierung von Rot zu Gelb und wechselt dann von Gelb zu Blau über 25% des Gradienten:

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

Mehrpositionen-Farbstopps sind erlaubt. Eine Farbe kann als zwei angrenzende 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 keine Farbe mit einem 0% Stopp vorhanden ist, wird die zuerst angegebene Farbe an diesem Punkt sein. Ebenso wird die letzte Farbe bis zur 100%-Markierung reichen oder an der 100%-Markierung sein, wenn bei diesem letzten Stopp keine Länge angegeben wurde.

Formale Syntax

<linear-gradient()> = 
  linear-gradient( [ <linear-gradient-syntax> ] )  

<linear-gradient-syntax> = 
  [ [ <angle> | <zero> | to <side-or-corner> ] || <color-interpolation-method> ]? , <color-stop-list>  

<side-or-corner> = 
  [ left | right ]  ||
  [ top | bottom ]  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]  

<color-stop-list> = 
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?  

<rectangular-color-space> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  lab                |
  oklab              |
  <xyz-space>        

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<custom-color-space> = 
  <dashed-ident>  

<linear-color-stop> = 
  <color> <color-stop-length>?  

<linear-color-hint> = 
  <length-percentage>  

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65  

<color-stop-length> = 
  <length-percentage>{1,2}  

<length-percentage> = 
  <length>      |
  <percentage>  

Beispiele

Gradient in einem Winkel von 45 Grad

body {
  width: 100vw;
  height: 100vh;
}

body {
  background: linear-gradient(45deg, red, blue);
}

Gradient, der bei 60% der Gradientenlinie beginnt

body {
  width: 100vw;
  height: 100vh;
}

body {
  background: linear-gradient(135deg, orange 60%, cyan);
}

Interpolation im rechteckigen Farbraum

body {
  width: 100vw;
  height: 100vh;
}

body {
  background: linear-gradient(90deg in oklab, blue, red);
}

Interpolieren mit Farbton

<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 Farbensystem verwendet und 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);
}

Der Kasten oben 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. Der Kasten unten verwendet längere Interpolation, was bedeutet, dass die Farbe von Rot zu Blau über den längeren Bogen verläuft und durch Grüns, Gelbs und Orangen geht.

Gradient mit Mehrpositionen-Farbstopps

Dieses Beispiel verwendet Mehrpositionen-Farbstopps, wobei benachbarte Farben denselben Farb-Stopp-Wert haben, was einen gestreiften 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%
  );
}

Weitere linear-gradient Beispiele

Bitte sehen Sie Verwendung von CSS-Gradienten für weitere Beispiele.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung von CSS-Gradienten
• Andere Gradientfunktionen: repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient(), conic-gradient(), repeating-conic-gradient()
• <hue-interpolation-method>
• <color-interpolation-method>
• <image>
• CSS-Bildmodul