<gradient>

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

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. es gibt keine natürliche oder bevorzugte Größe oder 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 einer der unten aufgeführten Funktionstypen definiert.

Linearer Gradient

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

Radialer Gradient

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

Kegelförmiger Gradient

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

Wiederholender Gradient

Wiederholende Gradienten duplizieren einen Gradient so oft wie notwendig, 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 betrifft, werden Gradienten im alpha-prä-multiplizierten Farbraum berechnet. Dies verhindert, dass unerwartete Grautöne erscheinen, wenn sowohl die Farbe als auch die Deckkraft sich ändern. (Beachten Sie, dass ältere Browser möglicherweise dieses Verhalten 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 Gradient

Ein linearer Gradient.

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

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

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

Beispiel für einen radialen Gradient

Ein radialer Gradient.

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

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

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

Beispiel für einen kegelförmigen Gradient

Ein Beispiel für einen kegelförmigen Gradient.

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

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

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

.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

Browser-Kompatibilität

Siehe auch

• Verwendung von CSS-Gradienten
• Gradientfunktionen: linear-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient(), conic-gradient(), repeating-conic-gradient()
• CSS Grundlegende Datentypen
• CSS Werte und Einheiten Modul
• Lernen: Werte und Einheiten