repeating-radial-gradient()

À chaque répétition, les positions des arrêts de couleur sont décalés d'un multiple du dégradé unitaire (ce dernier couvrant la distance entre le premier et le dernier arrêt de couleur). Ainsi, la position de chaque arrêt de couleur final coïncide avec l'arrêt de couleur initial qui suit : si les couleurs sont différentes, on aura une transition abrupte. Pour ne pas obtenir cet effet, on pourra réutiliser la couleur du premier arrêt de couleur pour le dernier arrêt de couleur.

Comme les autres dégradés, un dégradé radial répété n'a pas de dimensions intrinsèques, c'est-à-dire qu'il n'a pas de taille ou de proportions préférées. Sa taille réelle correspondra à la taille de l'élément auquel il est appliqué.

Comme pour les autres dégradés, un dégradé linéaire répété n'est pas une couleur (type <color>) CSS mais un type particulier d'image (type <image>). À ce titre, repeating-radial-gradient() ne fonctionnera pas pour background-color et les autres propriétés qui utilisent le type de données <color>.

<position>

La position du dégradé, 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 contour du dégradé. 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.

<extent-keyword>

Un mot-clé décrivant la taille de la forme de terminaison. Les valeurs possibles sont :

Mot-clé	Description
closest-side	La forme du contour 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 du contour 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	La valeur par défaut. Cette valeur fonctionne de façon semblable à closest-corner, sauf que ce sera le coin le plus éloigné du centre qui sera utilisé.

Note : Les premières implémentations de cette fonction incluaient d'autres mots-clés (cover et contain) qui sont des synonymes respectifs des mots-clés standards farthest-corner et closest-side. Seuls les mots-clés standards doivent être utilisés, certaines implémentations ayant déjà abandonné ces anciennes variantes.

<color-stop>

Une valeur d'arrêt de couleur, composée d'une valeur <color>, suivie d'une ou deux positions d'arrêt optionnelles (définies par une valeur <percentage> ou <length> le long de l'axe du dégradé). Un pourcentage à 0%, ou une longueur de 0, représentera le centre du dégradé ; la valeur 100% représentera l'intersection de la forme du contour avec la ligne d'évolution du dégradé. Les valeurs de pourcentages intermédiaire sont positionnées linéairement le long du dégradé.

<repeating-radial-gradient()> = 
  repeating-radial-gradient( [ <radial-gradient-syntax> ] )  

<radial-gradient-syntax> = 
  [ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>  

<radial-shape> = 
  circle   |
  ellipse  

<radial-size> = 
  <radial-extent>               |
  <length [0,∞]>                |
  <length-percentage [0,∞]>{2}  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ 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> ]#?  

<radial-extent> = 
  closest-corner   |
  closest-side     |
  farthest-corner  |
  farthest-side    

<length-percentage> = 
  <length>      |
  <percentage>  

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

<linear-color-hint> = 
  <length-percentage>  

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

.radial-gradient {
  width: 240px;
  height: 120px;
}

.radial-gradient {
  background: repeating-radial-gradient(
    ellipse farthest-corner at 20% 20%,
    red,
    black 5%,
    blue 5%,
    green 10%
  );
  background: repeating-radial-gradient(
    ellipse farthest-corner at 20% 20%,
    red 0 5%,
    green 5% 10%
  );
}

Le dégradé elliptique a son centre situé à 20% du coin supérieur gauche et se répètera 10 fois entre le centre et le coin le plus éloigné (situé donc dans le coin inférieur droit). Les navigateurs qui prennent en charge les arrêts de couleur multiples afficheront des bandes elliptiques rouges et vertes. Les navigateurs qui n'implémentent pas cette fonctionnalité afficheront un dégradé qui va du rouge au noir puis du bleu au vert.

• Utiliser les dégradés CSS
• Les autres fonctions de dégradés :
  • conic-gradient()
  • linear-gradient()
  • radial-gradient()
  • repeating-conic-gradient()
  • repeating-linear-gradient()
• <image>
• image()
• element()
• image-set()
• cross-fade()