L’essentiel en bref
- Un dégradé conique change de couleur en tournant autour d’un point central : ses arrêts sont donc des angles et non des distances.
- Les dégradés coniques sont la façon naturelle de dessiner des cercles chromatiques, des camemberts et des anneaux, des reflets métalliques et des faisceaux de lumière.
- Les outils de design appellent souvent la même chose un dégradé angulaire.
- Tout dégradé conique a une pointe vive en son centre et une couture là où le cercle se ferme : il faut gérer les deux.
- Un dégradé conique à arrêts nets devient un graphique, et à arrêts doux une surface qui semble capter la lumière.
Sur cette page
Un dégradé conique change de couleur en balayant un point central, comme l’aiguille d’une horloge parcourt son cadran. Un dégradé linéaire change le long d’une ligne et un dégradé radial en s’éloignant du centre, mais un dégradé conique change avec l’angle. Regardez de dessus un cône peint en bandes et vous verriez la même chose, d’où son nom. Figma et d’autres outils l’appellent dégradé angulaire.
Ce comportement selon l’angle rend les dégradés coniques bons pour ce que les autres ne savent pas faire : cercles chromatiques, camemberts, métal brossé, éclats et faisceaux de lumière. Ce guide passe chacun en revue avec des exemples en direct. La syntaxe CSS complète se trouve dans CSS conic-gradient().
Comment fonctionne un dégradé conique
Vous définissez un centre, un angle de départ et une liste de couleurs avec des angles ou des pourcentages. Zéro degré pointe vers le haut, et le balayage tourne dans le sens horaire. L’endroit où une couleur finit et où la suivante commence est un arrêt, exactement comme dans les autres dégradés, sauf que 25 % désigne un quart de tour, pas un quart de la largeur.
conic-gradient(from 0deg at 50% 50%, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef4444)Cette répétition de la première couleur à la fin est importante. Si le dernier arrêt diffère du premier, une ligne nette apparaît tout droit vers le haut depuis le centre, là où le balayage rejoint son début. Le guide du cercle chromatique explique comment lire les teintes d’un cercle comme celui-ci.
Exemples de dégradés coniques pour le design
Camemberts et anneaux
Donnez à chaque couleur un angle de début et de fin et le dégradé devient un camembert, sans image ni bibliothèque de graphiques. Ajoutez un masque circulaire et c’est un anneau. Cela convient à des données simples et décoratives sur des posts et des diapositives. Pour un vrai rapport, ajoutez des libellés, car un graphique qui ne repose que sur la couleur échoue auprès de ceux qui voient les couleurs autrement.
.donut {
width: 160px;
aspect-ratio: 1;
border-radius: 50%;
/* 45%, 30% and 25% of the circle */
background: conic-gradient(#7c3aed 0% 45%, #f472b6 45% 75%, #fcd34d 75% 100%);
/* cut out the middle */
mask: radial-gradient(circle, transparent 55%, #000 56%);
}Métal et reflets
L’acier brossé, un disque vinyle et un bouton satiné reflètent la lumière en secteurs autour de leur centre. Alterner gris clairs et sombres autour d’un dégradé conique imite cet effet. Utilisez quatre à six alternances ; moins fait un ballon de plage, plus fait un graphique. Teintez légèrement les gris de chaud pour l’or ou le laiton, et de bleu pour le chrome.
Faisceaux et éclats
Placez le centre au-dessus ou en dehors du cadre et un mince secteur lumineux devient un faisceau de projecteur ou un rayon de lumière par une fenêtre. Un dégradé conique répété à secteurs alternés devient un soleil rayonnant, ce procédé rétro d’affiche de soldes. Gardez les éclats derrière un grand titre simple : ils sont déjà bruyants seuls.
Irisation
La vraie irisation change de teinte selon l’angle de vue. Un balayage conique doux de pastels, avec le centre décalé, s’en approche étonnamment. C’est la base de la plupart des dégradés holographiques.
Conique, radial ou linéaire
| Type | La couleur change avec | Idéal pour |
|---|---|---|
| Linéaire | La distance le long d’une ligne | Ciels, lumière venant d’un côté, fonds de marque simples |
| Radial | La distance depuis un centre | Projecteurs, halos, vignettes |
| Conique | L’angle autour d’un centre | Cercles, graphiques, reflets, faisceaux, éclats |
Dans le doute, demandez-vous ce que fait la lumière dans votre image. Une lumière qui tombe sur une surface est linéaire. Une lumière qui vient d’une source est radiale. Une lumière qui se reflète sur quelque chose de tournant ou de courbe est conique. Les types de dégradés les montrent tous côte à côte.
Réussir ses dégradés coniques
- 1
Décidez où va le centre
Un dégradé conique centré ressemble à un graphique ou à un cercle. Déplacer le centre vers un coin ou hors du cadre en fait de la lumière et du reflet.
- 2
Fermez le cercle
Répétez la première couleur à la fin sauf si vous voulez une couture visible. Les coutures nettes sont réservées aux graphiques et aux éclats.
- 3
Cachez ou adoucissez la pointe
Tout dégradé conique se pince en une pointe vive à son centre. Posez dessus un logo, un cercle ou le bord du cadre, ou floutez le calque.
- 4
Utilisez un angle de départ
Faire pivoter le départ avec
fromdéplace l’endroit où tombe le secteur le plus clair, ce qui suffit souvent à une composition. - 5
Combinez avec d’autres types
Un reflet conique subtil sur une base linéaire ou radiale ajoute une impression de matière sans attirer l’attention.
À éviter
- Un cercle arc-en-ciel en fond derrière du texte
- Une pointe vive au centre bien en vue
- Une couture là où la dernière couleur ne correspond pas à la première
- Des graphiques où la couleur est le seul moyen de distinguer les parts
À faire
- Des arcs de couleur courts et apparentés pour les surfaces
- Le centre caché derrière un objet ou hors du canevas
- La première couleur répétée à la fin
- Des libellés ou des motifs à côté des couleurs du graphique
Les dégradés coniques font aussi des motifs : une version répétée à quatre quarts nets dessine un damier en une ligne. Les motifs CSS en parlent.
Les questions qu’on nous pose
Qu’est-ce qu’un dégradé conique ?
Un dégradé conique change de couleur en tournant autour d’un point central : ses arrêts de couleur sont donc définis par un angle plutôt que par une distance.
Un dégradé conique est-il la même chose qu’un dégradé angulaire ?
Oui. Figma et plusieurs autres outils de design l’appellent dégradé angulaire ; le CSS l’appelle dégradé conique.
Comment faire un camembert avec un dégradé conique ?
Donnez à chaque couleur une position de début et de fin avec des arrêts nets, par exemple violet de 0 % à 45 % et rose de 45 % à 75 %. Ajoutez des libellés pour que le graphique ne dépende pas que de la couleur.
Pourquoi y a-t-il une ligne en haut de mon dégradé conique ?
Le balayage commence et finit au même angle. Si la dernière couleur diffère de la première, une couture apparaît là ; répétez la première couleur à la fin pour la supprimer.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil
