path: root/files/fr/web/css/radial-gradient()/index.html

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

<p>La fonction <strong><code>radial-gradient()</code></strong> permet de créer une {{cssxref("&lt;image&gt;")}} CSS représentant un dégradé de couleur. Ce dégradé diffuse depuis une origine, le <em>centre</em> du gradient. La valeur renvoyée par cette fonction est un objet CSS de type {{cssxref("&lt;gradient&gt;")}}.</p>

<div>{{EmbedInteractiveExample("pages/css/function-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>De façon analogue aux autres types de dégradés, un dégradé radial n'est pas une couleur ({{cssxref("&lt;color&gt;")}}) CSS mais une image <a href="/fr/docs/CSS/image#no_intrinsic">sans dimension intrinsèque</a> (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.</p>

<div class="note">
<p><strong>Note :</strong> La fonction <code>radial-gradient</code> 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 {{cssxref("repeating-radial-gradient")}}.</p>
</div>

<div class="note">
<p><strong>Note :</strong> Une valeur de type <code>&lt;gradient&gt;</code> est également une valeur de type <code>&lt;image&gt;</code>. 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 {{cssxref("&lt;color&gt;")}} et ne peut donc pas être utilisé avec les propriétés manipulant ces valeurs (par exemple {{cssxref("background-color")}}).</p>
</div>

<h2 id="Composition_dun_dégradé_radial">Composition d'un dégradé radial</h2>

<p><img alt="" src="/files/3795/radial%20gradient.png" style="height: 176px; width: 396px;"></p>

<p>Les dégradés radiaux sont définis par trois notions :</p>

<ul>
 <li>Le centre,</li>
 <li>La forme de terminaison : le contour et sa position,</li>
 <li>Les points de couleur (<em>color stops</em>).</li>
</ul>

<p>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 <em>rayon virtuel</em> 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.</p>

<p>Les formes de terminaisons peuvent prendre deux formes <code>:</code></p>

<ul>
 <li>circulaire (avec le mot-clé <code>circle)</code></li>
 <li>elliptique (avec le mot-clé <code>ellipse</code>).</li>
</ul>

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

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

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

<dl>
 <dt><code>&lt;position&gt;</code></dt>
 <dd>Une {{cssxref("&lt;position&gt;")}} CSS qui est interprétée de la même façon que pour les propriétés {{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. Elle vaut soit <code>circle</code> (la forme du dégradé sera un cercle de rayon constant) ou <code>ellipse</code> (la forme est une ellipse alignée sur les axes). La valeur par défaut est <code>ellipse</code>.</dd>
 <dt><code>&lt;linear-color-stop&gt;</code></dt>
 <dd>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 {{cssxref("&lt;color&gt;")}} éventuellement suivie d'une position définie par une pourcentage ({{cssxref("&lt;percentage&gt;")}}) ou une longueur ({{cssxref("&lt;length&gt;")}}) selon le rayon virtuel du gradient. Un pourcentage ou une longueur nulle (<code>0%</code> ou <code>0</code>) indiquera le centre du dégradé. La valeur <code>100%</code> correspondra à l'intersection entre la forme de terminaison et le rayon virtuel. Les valeurs intermédiaires seront situées de façon proportionnelle.</dd>
 <dt><code>&lt;color-hint&gt;</code></dt>
 <dd>Une indication pour définir la progression de l'interpolation entre les deux points d'arrêt de couleur adjacents. La longueur définit l'emplacement auquel la transition aurait été effectuée à moitié entre les deux couleurs.</dd>
 <dt><code>&lt;extent-keyword&gt;</code></dt>
 <dd>Des mots-clés qui permettent de décrire la taille de la forme de terminaison. 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 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).</td>
   </tr>
   <tr>
    <td><code>closest-corner</code></td>
    <td>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.</td>
   </tr>
   <tr>
    <td><code>farthest-side</code></td>
    <td>Cette valeur fonctionne de façon semblable à <code>closest-side</code>, sauf que ce seront les côtés les plus éloignés qui seront utilisés.</td>
   </tr>
   <tr>
    <td><code>farthest-corner</code></td>
    <td>La valeur par défaut. Cette valeur fonctionne de façon semblable à <code>closest-corner</code>, sauf que ce sera le coin le plus éloigné qui sera utilisé.</td>
   </tr>
  </tbody>
 </table>
 D'anciens brouillons de la spécification indiquaient d'autres mots-clés, <code>cover</code> et <code>contain</code>, respectivement synonymes des valeurs standards <code>farthest-corner</code> et <code>closest-side</code>. Seules les valeurs standards doivent être utilisées, certaines implémentations ont d'ailleurs déjà retirées les anciennes formes.</dd>
</dl>

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

<pre class="syntaxbox notranslate">radial-gradient(   [ circle || {{cssxref("&lt;length&gt;")}} ] [ at {{cssxref("&lt;position&gt;")}} ]? ,
                 | [ ellipse || [ {{cssxref("&lt;length&gt;")}}  |  {{cssxref("&lt;percentage&gt;")}}  ]{2}] [ at  {{cssxref("&lt;position&gt;")}}  ]? ,
                 | [ [ circle | ellipse ] || &lt;extent-keyword&gt; ] [ at  {{cssxref("&lt;position&gt;")}}  ]? ,
                 | at  {{cssxref("&lt;position&gt;")}}  ,
                 &lt;color-stop-list&gt; [ , &lt;color-stop-list&gt; ]+ )
avec &lt;extent-keyword&gt; = closest-corner | closest-side | farthest-corner | farthest-side
<code>  et<code> &lt;color-stop-list&gt; </code>= [ &lt;</code><dfn>linear-</dfn><code>color-stop&gt; [, &lt;color-hint&gt;? ]? ]#, &lt;</code><dfn>linear-</dfn><code>color-stop&gt;
  et &lt;</code><dfn>linear-</dfn><code>color-stop&gt; = &lt;color&gt; [ &lt;color-stop-length&gt; ]?
  et &lt;color-stop-length&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]{1,2}
  et &lt;color-hint&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]</code></pre>

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

<h3 id="Une_ellipse_avec_farthest-corner">Une ellipse avec <code>farthest-corner</code></h3>

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

<pre class="brush: css notranslate">.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%);
}</pre>

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

<pre class="brush: html notranslate">&lt;p class="exemple"&gt;
  Yop
&lt;/p&gt;</pre>

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

<p>{{EmbedLiveSample("Une_ellipse_avec_farthest-corner","250","150")}}</p>

<h3 id="Un_cercle_de_16_pixels">Un cercle de 16 pixels</h3>

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

<pre class="brush: css notranslate">.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);
}</pre>

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

<pre class="brush: html notranslate">&lt;p class="exemple"&gt;
  Yop
&lt;/p&gt;</pre>

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

<p>{{EmbedLiveSample("Un_cercle_de_16_pixels","250","150")}}</p>

<h3 id="Un_dégradé_simple">Un dégradé simple</h3>

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

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

<p>{{EmbedLiveSample('Un_dégradé_simple', 120, 120)}}</p>

<h3 id="Un_dégradé_non-centré">Un dégradé non-centré</h3>

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

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

<p>{{EmbedLiveSample('Un_dégradé_non-centré', 240, 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', '#radial-gradients', 'radial-gradients()')}}</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.radial-gradient")}}</p>

<h3 id="Notes_relatives_à_Quantum_Firefox">Notes relatives à Quantum (Firefox)</h3>

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

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

<ul>
 <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Manipuler les dégradés CSS</a>,</li>
 <li>{{cssxref("repeating-radial-gradient")}},</li>
 <li>{{cssxref("linear-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>