La fonction repeating-radial-gradient() fonctionne de façon similaire à radial-gradient mais répète les couleurs de façon infinie dans les deux directions avec des répétitions formant des bandes de gradient.

Comme pour les autres gradients, un gradient radial répété n'est pas une couleur CSS : ce n'est pas une valeur de type <color> mais une image (type <image>) sans dimension intrinsèque : elle n'a pas de taille naturelle ou préférée ni de proportion. Sa taille réelle correspondra à celle de l'élément où est appliqué le gradient.

Note : En CSS, un dégradé est une image (type de données <image> et une telle valeur ne peut être utilisée qu'avec les propriétés qui gèrent des images. Ainsi, repeating-radial-gradient() ne fonctionnera pas avec background-color ou avec les autres propriétés qui acceptent des couleurs (type de données <color>).

Syntaxe

/* Un dégradé répété qui part du centre de son conteneur,
   en commençant par du rouge, passant par du bleu puis,
   finissant par du vert */
repeating-radial-gradient(circle at center, red 0, blue, green 30px);

Valeurs

<position>
Une position CSS (<position>) qui sera interprétée de la même façon que background-position ou transform-origin. La valeur par défaut est center.
<shape>
La forme du gradient employé. C'est un mot-clé parmi circle (le dégradé est circulaire avec un rayon constant) ou ellipse (la forme est elliptique et l'axe est aligné avec la direction indiquée). La valeur par défaut est ellipse.
<size>
La taille du gradient (cf. la section sur les constantes dimensionnelles ci-après).
<color-stop>
Cette valeur représente une couleur fixe à une position donnée. Cette valeur est composée d'une valeur <color> éventuellement suivie d'une position d'arrêt (une valeur <percentage> ou <length> représentant l'emplacement sur la ligne du gradient). Une valeur de 0% ou 0 représentera le centre du gradient et la valeur de 100% représentera la fin de la forme qu'occupe le dégradé. Les valeurs intermédiaires sont positionnées de façon proportionnelles sur le rayon.
<extent-keyword>
Des mots-clés qui déterminent la taille de la forme. Les valeurs possibles sont :
Constante Description
closest-side La forme du gradient est délimitée par les côtés de la boîtes qui sont le plus proche du centre dans le cas des cercles. Dans le cas des ellipses, elle est délimitée par les côtés horizontaux et verticaux de la boîte.
closest-corner La forme du gradient est dimensionnée afin d'atteindre exactement le coin de la boîte le plus proche du centre.
farthest-side Fonctionne de façon similaire à closest-side mais cette fois, ce sont les côtés les plus éloignés du centre qui servent de délimitation.
farthest-corner Fonctionne de façon similaire à closest-corner mais dans ce cas, c'est le coin le plus éloigné du centre qui est utilisé comme délimitation.
Les premières versions du brouillon utilisaient d'autres termes comme cover et contain, respectivement synonymes de farthest-corner et closest-side. Certaines implémentations ont abandonné ces termes et on préfèrera donc utiliser les mots-clés précédemment listés.

Syntaxe formelle

repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )


<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<color-stop-list> = <color-stop>#{2,}


<length-percentage> = <length> | <percentage>
<color-stop> = <color> <length-percentage>?


<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>


<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )


<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Exemples

Dégradé noir et blanc

HTML

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

CSS

.radial-gradient {
  width: 120px;
  height: 120px;
  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
}

Résultat

Utilisation de farthest-corner

HTML

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

CSS

.radial-gradient {
  width: 120px;
  height: 120px;
  background: repeating-radial-gradient(ellipse farthest-corner,
      red, black 5%, blue 5%, green 10%);
}

Résultat

Spécifications

Spécification État Commentaires
CSS Images Module Level 3
La définition de 'repeating-radial-gradient()' 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 pour iOSSamsung Internet
Support simpleChrome Support complet 26
Support complet 26
Support complet 10
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 10Opera Support complet 12.1
Support complet 12.1
Aucun support 12 — 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 4.4
Support complet 4.4
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 46Opera Android Support complet 12.1
Support complet 12.1
Support complet 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari iOS Support complet 7.1Samsung 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.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,