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

Le type de donnée CSS <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 image sans 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 class="display-block" id="default-example">
  <div id="example-element"></div>
</section>

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

Comme pour l'interpolation des autres couleurs, les dégradés sont calculés dans l'espace de couleurs alpha prémultiplié. Cela permet d'éviter l'apparition de nuances de gris lorsque la couleur et l'opacité varient (on peut constater ce problème avec le mot-clé transparent dans d'anciens navigateurs).

Les types de dégradés

Les dégradés linéaires

Ils sont générés à partir de la fonction linear-gradient() : la couleur évolue suivant un axe imaginaire :

A rainbow made from a gradient

css

body {
  background: -moz-linear-gradient(
    left,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
  background: -webkit-linear-gradient(
    left,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
  background: -ms-linear-gradient(
    left,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
  background: -o-linear-gradient(
    left,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}

Les dégradés radiaux

Ils sont générés à partir de la fonction radial-gradient(). Plus on s'éloigne du point d'origine, plus la couleur varie par rapport à la couleur d'origine :

Radial gradient

css

body {
  background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll
    0% 0% transparent;
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
}

Les dégradés répétés

Ce sont des dégradés linéaires de taille fixe ou des dégradés radiaux qui sont répétés autant que nécessaire pour remplir la boîte visée :

Repeating gradient

css

body {
  background: -moz-repeating-linear-gradient(
    top left -45deg,
    red,
    red 5px,
    white 5px,
    white 10px
  );
  background: repeating-linear-gradient(
    to top left,
    red,
    red 5px,
    white 5px,
    white 10px
  );
}

Dégradé conique

Les couleurs de transitions s'appliquent progressivement autour d'un cercle. Un tel dégradé est généré avec la fonction conic-gradient().

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

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

css

.conic-gradient {
  background: conic-gradient(lightpink, white, powderblue);
}

Spécifications

Specification
CSS Images Module Level 4 # gradients