`<gradient>` CSS-Typ

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Der <gradient> CSS Datentyp ist ein spezieller Typ von <image>, der aus einem fortschreitenden Ü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-Verlauf hat keine intrinsische Größe; 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 eine der unten aufgeführten Funktionstypen definiert.

Lineare Gradienten

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

Radiale Gradienten

Radiale Verläufe ändern Farben fortschreitend von einem Mittelpunkt (Ursprung) aus. Sie werden mit der Funktion radial-gradient() erzeugt.

Kegelförmige Gradienten

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

Wiederholende Gradienten

Wiederholende Verläufe duplizieren einen Verlauf 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 Verläufe im alpha-vorgemultiplizierten Farbraum berechnet. Dies verhindert, dass unerwartete Grautöne erscheinen, wenn sowohl die Farbe als auch die Deckkraft verändert werden. (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()>  |
  <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 für einen linearen Verlauf

Ein linearer Verlauf.

<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 einen radialen Verlauf

Ein radialer Verlauf.

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

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

css

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

Beispiel für einen kegelförmigen Verlauf

Ein Beispiel für einen kegelförmigen Verlauf.

<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 Verläufe

Beispiele für wiederholende lineare und radiale Verläufe.

<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

Spezifikation
CSS Images Module Level 4 # gradients

Browser-Kompatibilität

Siehe auch

Verwendung von CSS-Verläufen
Verlauffunktionen: linear-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient(), conic-gradient(), repeating-conic-gradient()
CSS Grunddatentypen
CSS-Werte und -Einheiten Modul
Lernen: Werte und Einheiten

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

<gradient> CSS-Typ

Help improve MDN

`<gradient>` CSS-Typ