<gradient>

Baseline Widely available *

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

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

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

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; d.h. er hat keine natürliche oder bevorzugte Größe und kein bevorzugtes Verhältnis. Seine konkrete Größe passt sich der Größe des Elements an, auf das er angewendet wird.

Syntax

Der <gradient> Datentyp wird mit einer der unten aufgelisteten 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). Sie werden mit der radial-gradient() Funktion erzeugt.

Konischer Gradient

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

Wiederholender Gradient

Wiederholende Gradienten duplizieren einen Gradient 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() erzeugt.

Interpolation

Wie bei jeder Interpolation, die Farben betrifft, werden Gradienten im Alpha-vorvermittelten Farbraum berechnet. Dies verhindert das Auftreten unerwarteter Grautöne, wenn sowohl die Farbe als auch die Deckkraft sich ändern. (Es ist zu beachten, dass ältere Browser dieses Verhalten möglicherweise nicht anwenden, wenn das transparent Schlüsselwort verwendet wird.)

Formale Syntax

<gradient> = 
  <linear-gradient()>            |
  <repeating-linear-gradient()>  |
  <radial-gradient()>            |
  <repeating-radial-gradient()>  |
  <conic-gradient()>             |
  <repeating-conic-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> ] )  

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

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

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

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

<conic-gradient-syntax> = 
  [ [ [ from [ <angle> | <zero> ] ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <angular-color-stop-list>  

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

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]  

<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> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

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

<rectangular-color-space> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  lab                |
  oklab              |
  <xyz-space>        

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<custom-color-space> = 
  <dashed-ident>  

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

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

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

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

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

<angular-color-stop> = 
  <color> <color-stop-angle>?  

<angular-color-hint> = 
  <angle-percentage>  |
  <zero>              

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65  

<color-stop-length> = 
  <length-percentage>{1,2}  

<color-stop-angle> = 
  [ <angle-percentage> | <zero> ]{1,2}  

<angle-percentage> = 
  <angle>       |
  <percentage>

Beispiele

Beispiel eines linearen Gradients

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 eines radialen Gradients

Ein radialer Gradient.

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

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

css

.radial-gradient {
  background: radial-gradient(red, yellow, dodgerblue);
}

Beispiel eines konischen Gradients

Ein Beispiel eines konischen Gradients.

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

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

css

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

Beispiele von wiederholenden 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

CSS-Gradienten verwenden
Gradientenfunktionen: linear-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient(), conic-gradient(), repeating-conic-gradient()
CSS Grundlegende Datentypen
Modul CSS-Werte und -Einheiten
Lernen: Werte und Einheiten

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden