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 {{CSSxRef("<gradient>")}} qui est un type particulier d'{{CSSxRef("<image>")}}.
{{EmbedInteractiveExample("pages/css/function-conic-gradient.html")}}
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 https://github.com/mdn/interactive-examples et à envoyer une pull request !
À 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 {{CSSxRef("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é {{CSSxRef("background-color")}} ou pour les autres propriétés qui utilisent les données de type {{CSSxRef("<color>")}}.
Note : Un tel dégradé est appelé conique car, vu du dessus, la répartition des couleurs fait apparaître un cône.
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.
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 {{cssxref("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.
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("<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é.
/* 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%) );
from qui indique un angle et qui définit la rotation du dégradé selon le sens des aiguilles d'une montre.<position>center qui sera utilisée comme valeur par défaut, indiquant que le dégradé sera centré.<angular-color-stop><color-hint>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.
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}
div {
width: 100px;
height: 100px;
}
<div></div>
div {
background-image:
conic-gradient(from 40deg, #fff, #000);
}
{{EmbedLiveSample("Un_dégradé_à_40°", 120, 120)}}
div {
width: 100px;
height: 100px;
}
<div></div>
div {
background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg);
}
{{EmbedLiveSample("Un_dégradé_décentré", 120, 120)}}
This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.
div {
width: 100px;
height: 100px;
}
<div></div>
div {
background: conic-gradient(
red 36deg, orange 36deg 170deg, yellow 170deg);
border-radius: 50%
}
{{EmbedLiveSample("Un_camembert_sous_forme_de_dégradé", 120, 120)}}
div {
width: 100px;
height: 100px;
}
<div></div>
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;
}
{{EmbedLiveSample("Un_damier", 120, 120)}}
Note : Voir Utiliser les dégradés CSS pour plus d'exemples.
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écification | État | Commentaires |
|---|---|---|
| {{SpecName('CSS4 Images', '#conic-gradients', 'conic-gradient()')}} | {{Spec2('CSS4 Images')}} |
{{Compat("css.types.image.gradient.conic-gradient")}}