La fonction radial-gradient() permet de créer une <image> CSS représentant un dégradé de couleur. Ce dégradé diffuse depuis une origine, le centre du gradient. La valeur renvoyée par cette fonction est un objet CSS de type <gradient>.

De façon analogue aux autres types de dégradés, un dégradé radial n'est pas une couleur (<color>) CSS mais une image sans dimension intrinsèque (c'est-à-dire que celle-ci ne possède pas de taille naturelle ou préférée ni de proportion). Sa taille réelle correspondra à la taille de l'élément auquel le gradient s'applique.

Note : La fonction radial-gradient ne permet pas d'obtenir des dégradés radiaux répétés. Pour obtenir un tel effet concentrique, on pourra utiliser la fonction CSS repeating-radial-gradient.

Note : Une valeur de type <gradient> est également une valeur de type <image>. On peut donc utiliser des dégradés à n'importe quel endroit où on peut utiliser des images. En revanche, un dégradé n'est pas une valeur de type <color> et ne peut donc pas être utilisé avec les propriétés manipulant ces valeurs (par exemple background-color).

Composition d'un dégradé radial

Les dégradés radiaux sont définis par trois notions :

  • Le centre,
  • La forme de terminaison : le contour et sa position,
  • Les points de couleur (color stops).

Pour obtenir un dégradé radial, on trace des formes uniformes concentriques, identiques à la formes de terminaison en partant du centre. Les points de couleur sont positionnés sur un rayon virtuel qui s'étend horizontalement depuis le centre et vers la droite. Lorsqu'on positionne ces points avec des pourcentages, la valeur sera relative au rayon total qui est la distance entre le centre et la forme de terminaison. Chaque forme a une seule couleur qui est déterminée par la couleur du point d'intersection entre le rayon et la forme.

Les formes de terminaisons peuvent prendre deux formes :

  • circulaire (avec le mot-clé circle)
  • elliptique (avec le mot-clé ellipse).

Syntaxe

/* Un dégradé qui part du centre du conteneur,
   qui commence en rouge, passe par du bleu 
   et finit en vert. */
radial-gradient(circle at center, red 0, blue, green 100%)

Valeurs

<position>
Une <position> CSS qui est interprétée de la même façon que pour les propriétés background-position ou transform-origin. La valeur par défaut est center.
<shape>
La forme du gradient. Elle vaut soit circle (la forme du dégradé sera un cercle de rayon constant) ou ellipse (la forme est une ellipse alignée sur les axes). La valeur par défaut est ellipse.
<color-stop>
Ces valeurs indiquent qu'une couleur donnée doit être utilisée à un endroit spécifique du dégradé. Cette valeur se compose d'une valeur <color> éventuellement suivie d'une position définie par une pourcentage (<percentage>) ou une longueur (<length>) selon le rayon virtuel du gradient. Un pourcentage ou une longueur nulle (0% ou 0) indiquera le centre du dégradé. La valeur 100% correspondra à l'intersection entre la forme de terminaison et le rayon virtuel. Les valeurs intermédiaires seront situées de façon proportionnelle.
<extent-keyword>
Des mots-clés qui permettent de décrire la taille de la forme de terminaison. Les valeurs possibles sont :
Constante Description
closest-side La forme de terminaison du dégradé touche le côté de la boîte le plus proche du centre (pour les cercles) ou touche les côtés horizontaux et verticaux les plus proches du centre (pour les ellipses).
closest-corner La forme de terminaison du dégradé est dimensionnée afin de toucher exactement le coin de la boîte le plus proche du centre.
farthest-side Cette valeur fonctionne de façon semblable à closest-side, sauf que ce seront les côtés les plus éloignés qui seront utilisés.
farthest-corner Cette valeur fonctionne de façon semblable à closest-corner, sauf que ce sera le coin le plus éloigné qui sera utilisé.
D'anciens brouillons de la spécification indiquaient d'autres mots-clés, cover et contain, respectivement synonymes des valeurs standards farthest-corner et closest-side. Seules les valeurs standards doivent être utilisées, certaines implémentations ont d'ailleurs déjà retirées les anciennes formes.

Syntaxe formelle

radial-gradient(   [ circle || <length> ] [ at <position> ]? ,
                 | [ ellipse || [ <length>  |  <percentage>  ]{2}] [ at  <position>  ]? ,
                 | [ [ circle | ellipse ] || <extent-keyword> ] [ at  <position>  ]? ,
                 | at  <position>  ,
                 <color-stop> [ , <color-stop> ]+ )
avec <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
  et <color-stop> = <color> [ <percentage> | <length> ]?

Exemples

Une ellipse avec farthest-corner

CSS

.exemple {
  height: 100vh;
  width: 200vh;
  background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
}

HTML

<p class="exemple">
  Yop
</p>

Résultat

Un cercle de 16 pixels

CSS

.exemple {
  height: 100vh;
  width: 100vh;
  background-image: radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);
}

HTML

<p class="exemple">
  Yop
</p>

Résultat

Un dégradé simple

<div class="radial-gradient"></div>
.radial-gradient {
  width: 240px;
  height: 120px;
  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
} 

Un dégradé non-centré

<div class="radial-gradient"></div>
.radial-gradient {
  width: 240px;
  height: 120px;
  background-image: radial-gradient(farthest-corner at 40px 40px,
      #f35 0%, #43e 100%);
}

Spécifications

Spécification État Commentaires
CSS Images Module Level 3
La définition de 'radial-gradients()' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 26
Support complet 26
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12Firefox Support complet 16
Notes
Support complet 16
Notes
Notes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Support complet 3.6
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 10
Notes
Support complet 10
Notes
Notes Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: -ms-filter: progid:DXImageTransform.Microsoft.Gradient().
Opera Support complet 12.1
Support complet 12.1
Aucun support 11.6 — 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Support complet 6.1
Support complet 6.1
Support complet 5.1
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Safari 4 was supporting an experimental -webkit-gradient(radial,…) function. This old outdated syntax is still supported for compatibility purposes.
WebView Android Support complet Oui
Support complet Oui
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 26
Support complet 26
Support complet 18
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Mobile Support complet OuiFirefox Android Support complet 16
Notes
Support complet 16
Notes
Notes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Support complet 4
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 12.1
Support complet 12.1
Aucun support 12 — 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Support complet 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari iOS Support complet OuiSamsung Internet Android Support complet Oui
at syntaxChrome Support complet 26Edge Support complet 12Firefox Support complet 16
Notes
Support complet 16
Notes
Notes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Support complet 10
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 10Opera Support complet 15
Support complet 15
Aucun support 11.6 — 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Safari Aucun support NonWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 16
Support complet 16
Support complet 10
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Support complet Oui
Interpolation Hints / Gradient MidpointsChrome Support complet 40Edge Aucun support NonFirefox Support complet 36IE Aucun support NonOpera Support complet 27Safari Support complet 6.1WebView Android Support complet 40Chrome Android Support complet 40Edge Mobile Aucun support NonFirefox Android Support complet 36Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Notes relatives à Quantum (Firefox)

  • Gecko possède un bug qui fait que radial-gradient(circle  gold, red) fonctionne bien que la virgule entre circle et gold soit absente (cf. bug 1383323). Le nouveau moteur de rendu CSS, Stylo, prévu pour Firefox 57, corrige ce bug.
  • De plus, les expressions utilisant calc sont rejetées lorsqu'elles sont utilisées pour définit le rayon dans radial-gradient(), la valeur obtenue étant alors considérée comme invalide (cf. bug 1376019). Ce point a également été corrigé avec Stylo.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, PetiPandaRou, teoli, philippe97, FredB, Jeansebastien.ney
Dernière mise à jour par : SphinxKnight,