<gradient>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Der <gradient> CSS Datentyp ist ein spezieller Typ von <image>, der aus einem progressiven Übergang zwischen zwei oder mehr Farben besteht.

Probieren Sie es aus

Ein CSS-Gradient hat keine intrinsischen Abmessungen; 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 es angewendet wird.

Syntax

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

Linearer Gradient

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

Radialer Gradient

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

Konischer Gradient

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

Wiederholender Gradient

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

Interpolation

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

Formale Syntax

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

Beispiele

Beispiel für einen linearen Gradient

Ein einfacher linearer Gradient.

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

Beispiel für einen radialen Gradient

Ein einfacher radialer Gradient.

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

Beispiel für einen konischen Gradient

Ein einfaches Beispiel für einen konischen Gradient. Beachten Sie, dass dies bisher nicht weit verbreitet in Browsern unterstützt wird.

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

Beispiele für wiederholende Gradienten

Einfache Beispiele für wiederholende lineare und radiale Gradienten.

css
.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);
}

Spezifikationen

Specification
CSS Images Module Level 4
# gradients

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch