---
title: repeating-radial-gradient()
slug: Web/CSS/repeating-radial-gradient()
tags:
  - CSS
  - Fonction
  - Reference
translation_of: Web/CSS/repeating-radial-gradient()
---
<div>{{CSSRef}}</div>

<p>La fonction <code><strong>repeating-radial-gradient()</strong></code> fonctionne de façon similaire à {{cssxref("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 à {{cssxref("repeating-linear-gradient")}} qui permet de répéter un dégradé linéaire ({{cssxref("linear-gradient")}}).</p>

<div>{{EmbedInteractiveExample("pages/css/function-repeating-radial-gradient.html")}}</div>

<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>

<p>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 {{cssxref("&lt;color&gt;")}} mais une image (type {{cssxref("&lt;image&gt;")}}) <a href="/fr/docs/Web/CSS/image">sans dimension intrinsèque</a> : 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.</p>

<div class="note">
<p><strong>Note :</strong> En CSS, un dégradé est une image (type de données {{cssxref("&lt;image&gt;")}} et une telle valeur ne peut être utilisée qu'avec les propriétés qui gèrent des images. Ainsi, <code>repeating-radial-gradient()</code> ne fonctionnera pas avec {{cssxref("background-color")}} ou avec les autres propriétés qui acceptent des couleurs (type de données {{cssxref("&lt;color&gt;")}}).</p>
</div>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="brush: css no-line-numbers notranslate">/* 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%);
</pre>

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt><code>&lt;position&gt;</code></dt>
 <dd>Une position CSS ({{cssxref("&lt;position&gt;")}}) qui sera interprétée de la même façon que {{cssxref("background-position")}} ou {{cssxref("transform-origin")}}. La valeur par défaut est <code>center</code>.</dd>
 <dt><code>&lt;shape&gt;</code></dt>
 <dd>La forme du gradient employé. C'est un mot-clé parmi <code>circle</code> (le dégradé est circulaire avec un rayon constant) ou <code>ellipse</code> (la forme est elliptique et l'axe est aligné avec la direction indiquée). La valeur par défaut est <code>ellipse</code>.</dd>
 <dt><code>&lt;size&gt;</code></dt>
 <dd>La taille du gradient (cf. la section sur les constantes dimensionnelles ci-après).</dd>
 <dt><code>&lt;color-stop&gt;</code></dt>
 <dd>Cette valeur représente une couleur fixe à une position donnée. Cette valeur est composée d'une valeur {{cssxref("&lt;color&gt;")}} éventuellement suivie d'une position d'arrêt (une valeur {{cssxref("&lt;percentage&gt;")}} ou {{cssxref("&lt;length&gt;")}} représentant l'emplacement sur la ligne du gradient). Une valeur de <code>0%</code> ou <code>0</code> représentera le centre du gradient et la valeur de <code>100%</code> 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.</dd>
 <dt><code>&lt;extent-keyword&gt;</code></dt>
 <dd>Des mots-clés qui déterminent la taille de la forme. Les valeurs possibles sont :</dd>
 <dd>
 <table class="standard-table">
  <tbody>
   <tr>
    <th>Constante</th>
    <th>Description</th>
   </tr>
   <tr>
    <td><code>closest-side</code></td>
    <td>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.</td>
   </tr>
   <tr>
    <td><code>closest-corner</code></td>
    <td>La forme du gradient est dimensionnée afin d'atteindre exactement le coin de la boîte le plus proche du centre.</td>
   </tr>
   <tr>
    <td><code>farthest-side</code></td>
    <td>Fonctionne de façon similaire à <code>closest-side</code> mais cette fois, ce sont les côtés les plus éloignés du centre qui servent de délimitation.</td>
   </tr>
   <tr>
    <td><code>farthest-corner</code></td>
    <td>Fonctionne de façon similaire à <code>closest-corner</code> mais dans ce cas, c'est le coin le plus éloigné du centre qui est utilisé comme délimitation.</td>
   </tr>
  </tbody>
 </table>
 Les premières versions du brouillon utilisaient d'autres termes comme <code>cover</code> et <code>contain</code>, respectivement synonymes de <code>farthest-corner</code> et <code>closest-side</code>. Certaines implémentations ont abandonné ces termes et on préfèrera donc utiliser les mots-clés précédemment listés.</dd>
</dl>

<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>

{{csssyntax}}

<h2 id="Exemples">Exemples</h2>

<h3 id="Dégradé_noir_et_blanc">Dégradé noir et blanc</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">.radial-gradient {
  width: 120px;
  height: 120px;
  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
}
</pre>

<h4 id="Résultat">Résultat</h4>

<p>{{EmbedLiveSample('Dégradé_noir_et_blanc', 120, 120)}}</p>

<h3 id="Utilisation_de_farthest-corner">Utilisation de <code>farthest-corner</code></h3>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css notranslate">.radial-gradient {
  width: 120px;
  height: 120px;
  background: repeating-radial-gradient(ellipse farthest-corner,
      red, black 5%, blue 5%, green 10%);
}
</pre>

<h4 id="Résultat_2">Résultat</h4>

<p>{{EmbedLiveSample('Utilisation_de_farthest-corner', 120, 120)}}</p>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-radial-gradient()')}}</td>
   <td>{{Spec2('CSS3 Images')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>

<p>{{Compat("css.types.image.gradient.repeating-radial-gradient")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Utiliser les gradients CSS</a></li>
 <li>{{cssxref("repeating-linear-gradient")}}</li>
 <li>{{cssxref("radial-gradient")}}</li>
 <li>{{cssxref("repeating-linear-gradient")}}</li>
 <li>{{cssxref("conic-gradient")}}</li>
 <li>{{cssxref("repeating-conic-gradient")}}</li>
 <li>{{cssxref("&lt;image&gt;")}}</li>
 <li>{{cssxref("_image","image()")}}</li>
 <li>{{cssxref("element()")}}</li>
 <li>{{cssxref("image-set","image-set()")}}</li>
 <li>{{cssxref("cross-fade")}}</li>
</ul>