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 Verlaufsachse. Falls angegeben, besteht sie 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. Falls 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 umgewandelt.

<angle>

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

<linear-color-stop>

Ein <color>-Wert eines Farbstopps, gefolgt von ein oder zwei optionalen Stopppositionen (jede davon entweder ein <percentage> oder ein <length> entlang der Verlaufsachse).

<color-hint>

Ein Interpolation-Hinweis, der definiert, wie der Verlauf zwischen angrenzenden Farbstopps fortschreitet. Die Länge definiert, an welchem Punkt zwischen zwei Farbstopps die Übergangsfarbe den Mittelwert des Farbübergangs erreichen sollte. Wenn weggelassen, ist der Mittelwert des Farbübergangs der Mittelwert zwischen zwei Farbstopps.

Beschreibung

Wie bei jedem Verlauf hat ein linearer Verlauf keine intrinsischen Dimensionen, d. h., er hat keine natürliche oder bevorzugte Größe oder ein 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 sein Container zu füllen, verwenden Sie stattdessen die Funktion repeating-linear-gradient().

Weil <gradient>s zum <image>-Datentyp gehören, können sie nur dort verwendet werden, wo <image>s verwendet werden können. Aus diesem Grund wird linear-gradient() nicht auf background-color und anderen Eigenschaften funktionieren, die den <color>-Datentyp verwenden.

Zusammensetzung eines linearen Verlaufs

Ein linearer Verlauf ist durch eine Achse—die Verlaufsachse—und zwei oder mehr Farbstoppunkte definiert. Jeder Punkt auf der Achse hat eine eindeutige Farbe; um einen sanften Verlauf zu erzeugen, zieht die Funktion linear-gradient() eine Reihe von farbigen Linien, die senkrecht zur Verlaufsachse sind, wobei jede Linie der Farbe des Punktes entspricht, an dem sie die Verlaufsachse schneidet.

Die Verlaufsachse wird durch das Zentrum des Kastens, der das Verlaufsbild enthält, und durch einen Winkel definiert. Die Farben des Verlaufs werden durch zwei oder mehr Punkte bestimmt: den Anfangspunkt, den Endpunkt und eventuell dazwischen liegende Farbstopppunkte.

Der Startpunkt ist der Ort auf der Verlaufsachse, 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 Verlaufsachse mit einer senkrechten Linie definiert, die von der Ecke des Kastens verläuft, die im gleichen Quadranten liegt. Der Endpunkt kann als der symmetrische Punkt des Anfangspunkts 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 dieselbe Farbe wie die jeweiligen Start- oder Endpunkte.

Anpassen von Verläufen

Indem Sie weitere Farbstopppunkte auf der Verlaufsachse hinzufügen, können Sie einen hochgradig angepassten Übergang zwischen mehreren Farben erstellen. Die Position eines Farbstopps kann explizit durch Verwendung eines <length> oder eines <percentage> definiert werden. Wenn Sie die Position einer Farbe nicht angeben, wird sie genau zwischen der vorhergehenden und nachfolgenden Farbe gesetzt. Die folgenden beiden 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 verläuft der Übergang von der Farbe bei einem Farbstopp zu der Farbe beim nachfolgenden Farbstopps gleichmäßig, wobei der Mittelwert der Farben der Mittelpunkt des Farbübergangs ist. Sie können diesen Mittelpunkt an jede beliebige Position zwischen zwei Farbstopps verschieben, indem Sie einen nicht benannten % Farbhinweis zwischen den beiden Farben hinzufügen, um anzuzeigen, wo der Mittelpunkt des Farbübergangs sein soll. Im folgenden Beispiel ist es von Anfang bis zur 10%-Marke ein kräftiges Rot und von 90% bis zum Ende ein kräftiges Blau. Zwischen 10 % und 90 % wechselt die Farbe von Rot zu Blau, jedoch liegt der Mittelpunkt des Übergangs bei der 30 %-Marke anstatt bei 50 %, wie es ohne den 30 %-Farbhinweis geschehen wäre.

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

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

Farbstopps sollten in aufsteigender Reihenfolge aufgelistet werden. Nachfolgende Farbstopps mit niedrigerem Wert überschreiben den Wert des vorherigen Farbstopps und erzeugen einen harten Übergang. Folgendes Beispiel wechselt an der 40%-Marke von Rot zu Gelb und dann von Gelb zu Blau über 25% des Verlaufs:

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

Mehrfachpositionierte Farbstopps sind erlaubt. Eine Farbe kann als zwei angrenzende Farbstopps durch Angabe beider Positionen in der CSS-Deklaration deklariert 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 es keine Farbe mit einem 0%-Stopp gibt, die zuerst deklarierte Farbe an diesem Punkt sein. Ebenso wird die letzte Farbe bis zur 100%-Marke fortgesetzt oder an der 100%-Marke sein, wenn bei diesem letzten Stopp keine Länge deklariert 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

Verlauf in einem 45-Grad-Winkel

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

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

Verlauf, der bei 60% der Verlaufsachse 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 Interpolation-Beispiel wird das hsl-Farbmodell verwendet, und es wird der Farbton 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 die kürzere Interpolation, was bedeutet, dass die Farbe direkt von Rot zu Blau über den kürzeren Bogen auf dem Farbkreis verläuft. Das untere Kästchen verwendet die längere Interpolation, was bedeutet, dass die Farbe von Rot zu Blau über den längeren Bogen verläuft und dabei Grün, Gelb und Orange durchquert.

Verlauf mit mehrfach positionierten Farbstopps

Dieses Beispiel verwendet mehrfach positionierte Farbstopps, wobei benachbarte Farben denselben Farbstoppwert haben, was einen Streifeneffekt 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%
  );
}

Mehr linear-gradient-Beispiele

Bitte sehen Sie sich Verwendung von CSS-Verläufen für weitere Beispiele an.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• 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 Bildermodul