Letype de donnéeCSS<gradient> permet de représenter une<image> contenant un dégradé entre deux ou plusieurs couleurs. Un dégradé CSS n'est pas une couleur CSS (type<color>) mais une imagesans dimension intrinsèque (elle n'a aucune taille naturelle ou ratio), sa taille réelle sera celle de l'élément auquel elle est appliquée.

Exemple interactif

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>  <div></div></section>

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

Un dégradé CSS estsans dimension intrinsèque : il n'a ni taille naturelle ni préférée, ni ratio préféré. Sa taille réelle correspond à celle de l'élément auquel il s'applique.

Syntaxe

Le type de donnée<gradient> se définit à l'aide de l'une des fonctions suivantes.

Dégradé linéaire

Les dégradés linéaires font évoluer les couleurs le long d'une ligne imaginaire. Ils sont générés avec la fonctionlinear-gradient().

Dégradé radial

Les dégradés radiaux font évoluer les couleurs à partir d'un point central (origine). Ils sont générés avec la fonctionradial-gradient().

Dégradé conique

Les dégradés coniques font évoluer les couleurs autour d'un cercle. Ils sont générés avec la fonctionconic-gradient().

Dégradé répétitif

Les dégradés répétitifs dupliquent un dégradé autant que nécessaire pour remplir la zone. Ils sont générés avec les fonctionsrepeating-linear-gradient(),repeating-radial-gradient() etrepeating-conic-gradient().

Interpolation

Comme pour toute interpolation de couleurs, les dégradés sont calculés dans l'espace colorimétrique alpha-prémultiplié. Cela évite l'apparition de teintes grises inattendues lorsque la couleur et l'opacité varient. (Attention : les anciens navigateurs peuvent ne pas utiliser ce comportement avec lemot-clé transparent.)

Syntaxe formelle

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

Exemples

Exemple de dégradé linéaire

Un dégradé linéaire.

<div>Dégradé linéaire</div>

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

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

Exemple de dégradé radial

Un dégradé radial.

<div>Dégradé radial</div>

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

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

Exemple de dégradé conique

Un exemple de dégradé conique.

<div>Dégradé conique</div>

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

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

Exemples de dégradés répétitifs

Exemples de dégradés linéaire, radial et conique répétitifs.

<div></div><span>Dégradé linéaire répétitif</span><hr /><div></div><span>Dégradé radial répétitif</span><hr /><div></div><span>Dégradé conique répétitif</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);}

Spécifications

Compatibilité des navigateurs

Voir aussi

• Manipuler les dégradés CSS
• Fonctions de dégradé :linear-gradient(),repeating-linear-gradient(),radial-gradient(),repeating-radial-gradient(),conic-gradient(),repeating-conic-gradient()
• Les types de donnée en CSS
• Les unités et valeurs en CSS
• Introduction à CSS : les unités et les valeurs