repeating-radial-gradient()

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 (de façon analogue à repeating-linear-gradient qui permet de répéter un dégradé linéaire (linear-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);

/* Un dégradé elliptique qui commence dans le coin supérieur gauche
   en commençant rouge puis en passant au vert, cinq fois entre le
   centre et le coin inférieur droit et une seule fois entre le
   centre et le coin supérieur gauche */
repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);

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> )où 
<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> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop>
où 
<length-percentage> = <length> | <percentage>
<linear-color-stop> = <color> <color-stop-length>?
<linear-color-hint> = <length-percentage>
où 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<color-stop-length> = <length-percentage>{1,2}
où 
<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>? )
où 
<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

BCD tables only load in the browser