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

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

<p>La fonction CSS <strong><code>conic-gradient()</code></strong> permet de créer une image consistuée d'un dégradé radial pour lequel les transitions entre les couleurs ont lieu autour d'un centre plutôt que depuis le centre. Un dégradé conique pourra par exemple être un graphique en camembert. Le résultat de la fonction <code>conic-gradient()</code> est un objet du type de données {{CSSxRef("&lt;gradient&gt;")}} qui est un type particulier d'{{CSSxRef("&lt;image&gt;")}}.</p>

<p>{{EmbedInteractiveExample("pages/css/function-conic-gradient.html")}}</p>

<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>À l'instar des autres dégradés, les dégradés coniques ne possèdent pas <a href="/en-US/docs/CSS/image#no_intrinsic">de dimension intrinsèque</a> (ils n'ont pas de taille préférentielle ou de ratio) : la taille réelle correspondra à la taille de l'élément auquel le dégradé s'applique ou à la taille de l'image.</p>

<p>Pour créer un dégradé conique qui se répète afin de couvrir 360° (un tour complet), on utilisera plutôt la notation fonctionnelle {{CSSxRef("repeating-conic-gradient")}}.</p>

<p>Les dégradés (<code>&lt;gradient&gt;</code>) sont un type d'image (<code>&lt;image&gt;</code>) et ne peuvent être utilisés qu'aux endroits où les images peuvent être utilisées. Aussi, <code>conic-gradient()</code> ne fonctionnera pas pour la propriété {{CSSxRef("background-color")}} ou pour les autres propriétés qui utilisent les données de type {{CSSxRef("&lt;color&gt;")}}.</p>

<div class="blockIndicator note">
<p><strong>Note :</strong> Un tel dégradé est appelé conique car, vu du dessus, la répartition des couleurs fait apparaître un cône.</p>
</div>

<h2 id="Quest-ce_quun_dégradé_conique">Qu'est-ce qu'un dégradé conique ?</h2>

<p>Un dégradé conique est semblable à un dégradé radial mais les transitions de couleurs sont placées sur différents angles plutôt que sur différents rayons. Avec les dégradés coniques, les transition entre les couleurs commencent depuis la direction pointant vers le haut puis dans le sens des aiguilles d'une montre. Avec un dégradé radial, les transitions progressent depuis le centre vers l'extérieur du cercle.</p>

<p><img alt="color stops along the circumference of a conic gradient and the axis of a radial gradient." src="https://mdn.mozillademos.org/files/16361/Screenshot_2018-11-29_21.09.19.png" style="height: 258px; width: 515px;"></p>

<p>Un dégradé conique est défini en indiquant un angle de rotation, le centre du dégradé puis en indiquant une liste de points d'arrêt de couleur. À la différence des dégradés linéaires et des dégradés radiaux pour lesquels les points d'arrêt de couleur sont placés avec une longueur, les points d'arrêt de couleur d'un dégradé conique sont placés à l'aide d'un angle. Les unités utilisables pour les angles sont <code>deg</code> (pour les degrés), <code>rad</code> (pour les radians), <code>grad</code> (pour les grades) et <code>turn</code> (pour les tours). Un cercle se divise en 360 degrés, 400 grades, 2 radians et un tour. Les navigateurs qui prennent en charge les dégradés coniques acceptent également les valeurs exprimées en pourcentage (100% correspondant à 360 degrés) mais cela ne fait pas partie de la spécification.</p>

<p>Comme pour les dégradés radiaux, la syntaxe pour les dégradés coniques permet de situer le centre du dégradé à n'importe quel endroit de l'image ou de l'élément, même en dehors. La position s'exprime avec deux valeurs, de façon semblable à la syntaxe de {{cssxref("background-position")}}.</p>

<p>L'arc du dégradé représente le périmètre du dégradé. Le point de départ du dégradé est situé en haut de l'axe vertical. Ensuite le dégradé évolue à partir de cet angle. Les couleurs du dégradé sont déterminées grâce aux points d'arrêt de couleur angulaires, aux points de départ et aux points d'arrivée et éventuellement aux points d'arrêt intermédiaires. Les transitions entre les couleurs peuvent être modifiées grâce à des indications entre les différents points d'arrêt.</p>

<h3 id="Adapter_les_dégradés">Adapter les dégradés</h3>

<p>En ajoutant plusieurs points d'arrêt de couleur sur l'arc du dégradé, il est possible de créer une transition personnalisée entre de nombreuses couleurs. La position d'un point d'arrêt de couleur peut être définie de façon explicite grâce à une valeur de type {{CSSxRef("&lt;angle&gt;")}}. Si on ne définit pas l'emplacement d'un point d'arrêt, ce dernier sera placé à mi-chemin entre le point d'arrêt précédent et le suivant. Si on ne définit pas d'angle pour le premier ou le dernier point d'arrêt de couleur, ils seront respectivement situés à <code>0deg</code> et <code>360deg</code>. Autrement dit, les deux dégradés suivants sont équivalents :</p>

<pre class="brush: css notranslate">conic-gradient(red, orange, yellow, green, blue);
conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);</pre>

<p>Par défaut, la transition entre les couleurs de deux points d'arrêt se fera progressivement avec la moitié de la transition à la moitié de l'angle. Ce milieu de transition peut être déplacé en ajoutant une indication de couleur qui définit l'emplacement voulu. L'exemple suivant commence avec du rouge jusqu'à 10%, fait une transition du rouge au bleu sur 80% du tour, les 10% restants sont en bleu. Cependant, le point de changement entre le bleu et le rouge se situe à 20% plutôt qu'à 50% (ce qui se serait produit sans l'indication <code>80grad</code>).</p>

<pre class="brush: css notranslate">conic-gradient(red 40grad, 80grad, blue 360grad);</pre>

<p>Si deux ou plusieurs points d'arrêt de couleur partagent le même emplacement, la transition sera franche entre la première et la dernière couleur déclarées pour cet emplacement. Si on emploie les dégradés coniques pour faire des camemberts (une mauvaise pratique car les dégradés ne sont pas accessibles), on peut utiliser des points d'arrêt avec plusieurs couleurs au même endroit pour créer une transition nette. Les deux déclarations suivantes sont synonymes :</p>

<pre class="brush: css notranslate">conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn);
conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn);</pre>

<p>Les points d'arrêt de couleur devraient être listés dans l'ordre croissant. Les points d'arrêt situés après mais dont la valeur d'angle est inférieure surchargeront les valeurs des points d'arrêt précédents et créeraient une rupture tranchée. Le dégradé qui suit passe de rouge à jaune à 30% puis de jaune à bleu après 35% :</p>

<pre class="brush: css notranslate">conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);
</pre>

<p>Il est possible d'obtenir d'autres effets avec les dégradés coniques. On peut même créer un damier en créant des quadrants supérieurs gauches et inférieurs droits en blanc et supérieurs droits et inférieurs gauches en noir puis en répétant le dégradé 16 fois (quatre fois en horizontal et quatre fois en vertical) :</p>

<pre class="brush: css notranslate">conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad);
background-size: 25% 25%;
</pre>

<p>On voit avec l'exemple précédent qu'il est aussi possible de mélanger différentes unités d'angle mais attention, cela diminue fortement la lisibilité.</p>

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

<pre class="language-css notranslate" id="css">/* Un dégradé conique tourné de 45 degrés,
   qui commence en bleu et finit en rouge */
conic-gradient(from 45deg, blue, red);

/* Une boîte bleu violette : le dégradé commence du bleu
   vers le rouge mais seule la partie inférieure droite du
   quadrant est visible car le centre du dégradé conique est
   dans le coin supérieur gauche */
conic-gradient(from 90deg at 0 0, blue, red);

/* Une roue des couleurs */
background: conic-gradient(
    hsl(360, 100%, 50%),
    hsl(315, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(225, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(135, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(45, 100%, 50%),
    hsl(0, 100%, 50%)
);</pre>

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

<dl>
 <dt>{{CSSxRef("&lt;angle&gt;")}}</dt>
 <dd>Une valeur précédée du mot-clé <code>from</code> qui indique un angle et qui définit la rotation du dégradé selon le sens des aiguilles d'une montre.</dd>
 <dt><code>&lt;position&gt;</code></dt>
 <dd>La position définit le centre du dégradé en respectant la même syntaxe que celle utilisée pour la propriété {{cssxref("background-position")}}. Si cette valeur est absente, ce sera la valeur <code>center</code> qui sera utilisée comme valeur par défaut, indiquant que le dégradé sera centré.</dd>
 <dt><code>&lt;angular-color-stop&gt;</code></dt>
 <dd>Un point d'arrêt de couleur utilisant une valeur de type {{CSSxRef("&lt;color&gt;")}} suivie par une ou deux positions d'arrêt (une valeur de type {{CSSxRef("&lt;angle&gt;")}} située le long de l'arc du dégradé).</dd>
 <dt><code>&lt;color-hint&gt;</code></dt>
 <dd>Une indication de couleur pour l'interpolation entre deux points d'arrêt. La longueur définit l'emplacement où les deux couleurs des points d'arrêts alentour doivent se joindre. Autrement dit, la longueur à laquelle la transition est effectuée à moitié. Si cette valeur est absente, la moitié de la transition est atteinte à la moitié de l'angle entre les deux points d'arrêt.</dd>
 <dd>
 <div class="note">
 <p><strong>Note :</strong> Le rendu des points d'arrêt de couleur pour les dégradés CSS respecte les mêmes règles que les points d'arrêt de couleur des <a href="/fr/docs/Web/SVG/Tutorial/Gradients">dégradés SVG</a>.</p>
 </div>
 </dd>
</dl>

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

<pre class="syntaxbox notranslate">conic-gradient(
  [ from &lt;angle&gt; ]? [ at &lt;position&gt; ]?, &lt;angular-color-stop-list&gt; )
  \---------------------------------/ \----------------------------/
        Gradient definition                List of color stops

where &lt;angular-color-stop-list&gt; = [ &lt;angular-color-stop&gt; [, &lt;angular-color-hint&gt;]? ]# , &lt;angular-color-stop&gt;
  and &lt;angular-color-stop&gt; = &lt;color&gt; &amp;&amp; &lt;color-stop-angle&gt;?
  and &lt;angular-color-hint&gt; = &lt;angle-percentage&gt;
  and &lt;color-stop-angle&gt; = &lt;angle-percentage&gt;{1,2}</pre>

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

<div>
<h3 id="Un_dégradé_à_40°">Un dégradé à 40°</h3>

<div class="hidden">
<pre class="brush: css notranslate">div {
  width: 100px;
  height: 100px;
}</pre>

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

<pre class="brush: css notranslate">div {
  background-image:
     conic-gradient(from 40deg, #fff, #000);
}
</pre>

<p>{{EmbedLiveSample("Un_dégradé_à_40°", 120, 120)}}</p>
</div>

<div>
<h3 id="Un_dégradé_décentré">Un dégradé décentré</h3>

<div class="hidden">
<pre class="brush: css notranslate">div {
  width: 100px;
  height: 100px;
}</pre>

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

<pre class="brush: css notranslate">div {
  background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg);
}</pre>

<p>{{EmbedLiveSample("Un_dégradé_décentré", 120, 120)}}</p>
</div>

<div>
<h3 id="Un_camembert_sous_forme_de_dégradé">Un camembert sous forme de dégradé</h3>

<p>This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.</p>

<div class="hidden">
<pre class="brush: css notranslate">div {
  width: 100px;
  height: 100px;
}</pre>

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

<pre class="brush: css notranslate">div {
  background: conic-gradient(
     red 36deg, orange 36deg 170deg, yellow 170deg);
  border-radius: 50%
}</pre>

<p>{{EmbedLiveSample("Un_camembert_sous_forme_de_dégradé", 120, 120)}}</p>
</div>

<div>
<h3 id="Un_damier">Un damier</h3>

<div class="hidden">
<pre class="brush: css notranslate">div {
  width: 100px;
  height: 100px;
}</pre>

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

<pre class="brush: css notranslate">div {
  background:
     conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn)
     top left / 25% 25% repeat;
  border: 1px solid;
}</pre>

<p>{{EmbedLiveSample("Un_damier", 120, 120)}}</p>
</div>

<div class="note">
<p><strong>Note :</strong> Voir <a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Utiliser les dégradés CSS</a> pour plus d'exemples.</p>
</div>

<h2 id="Acessibilité">Acessibilité</h2>

<p>Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan. Aussi, bien qu'il soit possible de créer des camemberts graphiques, des damiers ou d'autres effets grâce aux dégradés coniques, les images construites en CSS ne sont pas accessibles. Les images créées avec des dégradés coniques ne sont donc pas accessibles non plus. Si l'image contient des informations essentielles à la compréhension du document, mieux vaudra la décrire de façon sémantique dans le document afin que ce dernier soit correctement accessible.</p>

<ul>
 <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre les règles WCAG 1.1.</a></li>
 <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Comprendre les critères de succès 1.1.1  pour WCAG 2.0</a></li>
</ul>

<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('CSS4 Images', '#conic-gradients', 'conic-gradient()')}}</td>
   <td>{{Spec2('CSS4 Images')}}</td>
   <td></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.conic-gradient")}}</p>

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

<ul>
 <li><a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Utiliser les dégradés CSS</a></li>
 <li>Les autres fonctions associées aux dégradés : {{CSSxRef("repeating-conic-gradient")}}, {{CSSxRef("linear-gradient")}}, {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-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>