<gradient>

Ein CSS-Gradient hat keine intrinsischen Dimensionen; d.h., es gibt keine natürliche oder bevorzugte Größe, noch ein bevorzugtes Verhältnis. Seine konkrete Größe entspricht der Größe des Elements, auf das er angewendet wird.

Der <gradient>-Datentyp wird mit einem der unten aufgeführten Funktionstypen definiert.

Lineare Gradienten ändern Farben progressiv entlang einer imaginären Linie. Sie werden mit der linear-gradient() Funktion erzeugt.

Radiale Gradienten ändern Farben progressiv von einem Mittelpunkt aus. Sie werden mit der radial-gradient() Funktion erzeugt.

Kegelförmige Gradienten ändern Farben progressiv um einen Kreis herum. Sie werden mit der conic-gradient() Funktion erzeugt.

Wiederholende Gradienten duplizieren einen Gradient, um einen gegebenen Bereich so oft wie nötig auszufüllen. Sie werden mit den repeating-linear-gradient(), repeating-radial-gradient(), und repeating-conic-gradient() Funktionen erzeugt.

Wie bei jeder Interpolation, die Farben betrifft, werden Gradienten im Alpha-vorpremultiplizierten Farbraum berechnet. Dies verhindert unerwartete Grautöne, wenn sowohl die Farbe als auch die Deckkraft sich ändern. (Beachten Sie, dass ältere Browser dieses Verhalten möglicherweise nicht verwenden, wenn das transparente Schlüsselwort verwendet wird.)

<gradient> = 
  <linear-gradient()>            |
  <repeating-linear-gradient()>  |
  <radial-gradient()>            |
  <repeating-radial-gradient()>  

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

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

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

<repeating-radial-gradient()> = 
  repeating-radial-gradient( [ <radial-gradient-syntax> ] )  

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

<radial-gradient-syntax> = 
  [ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>  

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

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

<radial-shape> = 
  circle   |
  ellipse  

<radial-size> = 
  <radial-extent>               |
  <length [0,∞]>                |
  <length-percentage [0,∞]>{2}  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

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

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

<radial-extent> = 
  closest-corner   |
  closest-side     |
  farthest-corner  |
  farthest-side    

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

Ein einfacher linearer Gradient.

<div class="linear-gradient">Linear gradient</div>

div {
  width: 240px;
  height: 80px;
}

.linear-gradient {
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}

Ein einfacher radialer Gradient.

<div class="radial-gradient">Radial gradient</div>

div {
  width: 240px;
  height: 80px;
}

.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30 144 255));
}

Ein einfaches Beispiel für einen kegelförmigen Gradient. Beachten Sie, dass dies noch nicht weitgehend in Browsern unterstützt wird.

<div class="conic-gradient">Conic gradient</div>

div {
  width: 200px;
  height: 200px;
}

.conic-gradient {
  background: conic-gradient(pink, coral, lime);
}

Einfache Beispiele für wiederholende lineare und radiale Gradienten.

<div class="linear-repeat"></div>
<span>Repeating linear gradient</span>
<hr />
<div class="radial-repeat"></div>
<span>Repeating radial gradient</span>
<hr />
<div class="conic-repeat"></div>
<span>Repeating conic gradient</span>

div {
  display: inline-block;
  width: 240px;
  height: 80px;
}

span {
  font-weight: bold;
  vertical-align: top;
}

.linear-repeat {
  background: repeating-linear-gradient(
    to top left,
    pink,
    pink 5px,
    white 5px,
    white 10px
  );
}

.radial-repeat {
  background: repeating-radial-gradient(
    lime,
    lime 15px,
    white 15px,
    white 30px
  );
}

.conic-repeat {
  background: repeating-conic-gradient(lime, pink 30deg);
}

• Verwendung von CSS-Gradienten
• Gradientfunktionen: linear-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient(), conic-gradient(), repeating-conic-gradient()
• CSS-Grunddatentypen
• CSS-Werte und Einheiten Modul
• Lernen: Werte und Einheiten