La fonction CSS conic-gradient() 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 conic-gradient() est un objet du type de données <gradient> qui est un type particulier d'<image>.

À l'instar des autres dégradés, les dégradés coniques ne possèdent pas de dimension intrinsèque (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.

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 repeating-conic-gradient.

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

Note : Un tel dégradé est appelé conique car, vu du dessus, la répartition des couleurs fait apparaître un cône.

Qu'est-ce qu'un dégradé conique ?

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.

color stops along the circumference of a conic gradient and the axis of a radial gradient.

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 deg (pour les degrés), rad (pour les radians), grad (pour les grades) et turn (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.

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 background-position.

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.

Adapter les dégradés

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 <angle>. 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 à 0deg et 360deg. Autrement dit, les deux dégradés suivants sont équivalents :

conic-gradient(red, orange, yellow, green, blue); 
conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);

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 80grad).

conic-gradient(red 40grad, 80grad, blue 360grad);

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 :

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);

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% :

conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);

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) :

conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad); 
background-size: 25% 25%;

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é.

Syntaxe

/* 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%)
);

Valeurs

<angle>
Une valeur précédée du mot-clé from qui indique un angle et qui définit la rotation du dégradé selon le sens des aiguilles d'une montre.
<position>
La position définit le centre du dégradé en respectant la même syntaxe que celle utilisée pour la propriété background-position. Si cette valeur est absente, ce sera la valeur center qui sera utilisée comme valeur par défaut, indiquant que le dégradé sera centré.
<angular-color-stop>
Un point d'arrêt de couleur utilisant une valeur de type <color> suivie par une ou deux positions d'arrêt (une valeur de type <angle> située le long de l'arc du dégradé).
<color-hint>
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.

Note : 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 dégradés SVG.

Syntaxe formelle

conic-gradient( 
  [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
  \---------------------------------/ \----------------------------/
        Gradient definition                List of color stops  

where <angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>
  and <angular-color-stop> = <color> && <color-stop-angle>?
  and <angular-color-hint> = <angle-percentage>
  and <color-stop-angle> = <angle-percentage>{1,2}

Exemples

Un dégradé à 40°

div {
  background-image: 
     conic-gradient(from 40deg, #fff, #000);
}

Un dégradé décentré

div {
  background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg);
}

Un camembert sous forme de dégradé

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

div { 
  background: conic-gradient( 
     red 36deg, orange 36deg 170deg, yellow 170deg);
  border-radius: 50%
}

Un damier

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;
}

Note : Voir Utiliser les dégradés CSS pour plus d'exemples.

Acessibilité

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.

Spécifications

Spécification État Commentaires
CSS Images Module Level 4
La définition de 'conic-gradient()' dans cette spécification.
Version de travail  

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
conic-gradient()Chrome Support complet 69
Support complet 69
Support complet 59
Désactivée
Désactivée From version 59: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Support complet 56Safari Support complet 12.1WebView Android Support complet 69
Support complet 69
Support complet 59
Désactivée
Désactivée From version 59: this feature is behind the Enable Experimental Web Platform Features preference.
Chrome Android Support complet 69
Support complet 69
Support complet 59
Désactivée
Désactivée From version 59: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Support complet 48Safari iOS Support complet 12.2Samsung Internet Android Aucun support Non
Double-position color stopsChrome Support complet 72Edge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari ?
Notes
?
Notes
Notes In Safari Technology Preview Release 66
WebView Android Support complet 72Chrome Android Support complet 72Edge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS ?
Notes
?
Notes
Notes In Safari Technology Preview Release 66
Samsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : AlainGourves, SphinxKnight, mdnwebdocs-bot
Dernière mise à jour par : AlainGourves,