<gradient>

Ein CSS-Gradient hat keine intrinsischen Dimensionen; das heißt, 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.

Der <gradient>-Datentyp wird mit einer der unten aufgeführten Funktionsarten definiert.

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

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

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

Wiederholende Gradienten duplizieren ein Gradient so oft, wie nötig, um einen bestimmten Bereich zu fü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-vorvervielfachten Farbraum berechnet. Dies verhindert, dass unerwartete Grautöne erscheinen, 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 einfaches 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 einfaches radiale 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 konisches Gradient-Beispiel. Beachten Sie, dass dies derzeit nicht weitgehend von 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 wiederholende lineare und radiale Gradient-Beispiele.

<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
• Gradienten-Funktionen: linear-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient(), conic-gradient(), repeating-conic-gradient()
• CSS Grundlegende Datentypen
• CSS Einheiten und Werte
• Lernen: Werte und Einheiten