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

* Some parts of this feature may have varying levels of support.

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

Syntax

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

Linearer Gradient

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

Radialer Gradient

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

Kegelförmiger Gradient

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

Wiederholender Gradient

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.

Interpolation

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

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 kegelförmigen Gradient

Ein einfaches Beispiel für einen kegelförmigen Gradient. Beachten Sie, dass dies noch nicht weitgehend 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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
<gradient>
conic-gradient()
Double-position color stops
Hue interpolation method
Interpolation color space
linear-gradient()
Double-position color stops
Hue interpolation method
Interpolation color space
Interpolation Hints / Gradient Midpoints
Gradients applied to pre-multiplied color space (prevents grays from appearing in gradients with transparency)
to keyword
Unitless 0 for <angle>
radial-gradient()
at syntax
Double-position color stops
Hue interpolation method
Interpolation color space
Interpolation Hints / Gradient Midpoints
Gradients applied to pre-multiplied color space (prevents grays from appearing in gradients with transparency)
repeating-conic-gradient()
Hue interpolation method
Interpolation color space
repeating-linear-gradient()
Double-position color stops
Hue interpolation method
Interpolation color space
Interpolation Hints / Gradient Midpoints
to keyword
Unitless 0 for <angle>
repeating-radial-gradient()
at syntax
Double-position color stops
Hue interpolation method
Interpolation color space
Interpolation Hints / Gradient Midpoints

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch