<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 einen stetigen Übergang zwischen zwei oder mehr Farben darstellt.

Probieren Sie es aus

background: linear-gradient(#f69d3c, #3f87a6);

background: radial-gradient(#f69d3c, #3f87a6);

background: repeating-linear-gradient(#f69d3c, #3f87a6 50px);

background: repeating-radial-gradient(#f69d3c, #3f87a6 50px);

background: conic-gradient(#f69d3c, #3f87a6);

<section class="display-block" id="default-example">
  <div id="example-element"></div>
</section>

#example-element {
  min-height: 100%;
}

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 entspricht der Größe des Elements, auf das er angewendet wird.

Syntax

Der <gradient>-Datentyp wird durch einen der unten aufgelisteten Funktionstypen definiert.

Linearer Gradient

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

Radialer Gradient

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

Kegelförmiger Gradient

Kegelförmige Gradienten wechseln die Farben progressiv um einen Kreis herum. Sie werden mit der conic-gradient()-Funktion generiert.

Wiederholender Gradient

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

Interpolation

Wie bei jeder Interpolation, die Farben beinhaltet, werden Gradienten im alpha-vormultiplizierten 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> | <zero> | 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 linearen Gradient

Ein linearer Gradient.

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

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

css

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

Beispiel für radialen Gradient

Ein radialer Gradient.

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

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

css

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

Beispiel für kegelförmigen Gradient

Ein Beispiel für einen kegelförmigen Gradient.

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

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

css

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

Beispiele für wiederholende Gradienten

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

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

Siehe auch

Verwendung von CSS-Gradienten
Gradientenfunktionen: linear-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient(), conic-gradient(), repeating-conic-gradient()
CSS-Grunddaten-Typen
Modul der CSS-Werte und -Einheiten
Lernen: Werte und Einheiten