Guide pratique du dégradé conique CSS

Un dégradé conique en CSS fait tourner les couleurs autour d'un point central comme l'aiguille d'une horloge balayant le cadran, au lieu de se fondre en ligne droite ou de rayonner en anneaux. Cette seule différence permet à conic-gradient() de créer des roues chromatiques, des diagrammes circulaires, des anneaux de progression et des motifs angulaires nets que les dégradés linéaires et radiaux ne peuvent tout simplement pas produire. Ce guide vous donne d'abord le modèle mental, puis des recettes pratiques avec du code prêt à copier-coller.

Si vous n'avez jamais utilisé que linear-gradient(), la version conique peut sembler étrange au début. L'astuce est d'arrêter de penser en distance et de commencer à penser en angle. Une fois que cela fait tilt, toute une catégorie d'effets s'ouvre sans images, sans SVG et sans JavaScript.

Ce que fait réellement un dégradé conique#

conic-gradient() place des points de couleur autour d'un point central selon un angle, en balayant dans le sens horaire à partir d'une direction de départ. Imaginez une tarte découpée : chaque point de couleur est une coupe, et la part entre deux coupes se remplit d'un mélange (ou d'une bordure nette si les points se touchent). Les couleurs tournent autour du centre plutôt que de s'en éloigner.

C'est la distinction fondamentale que les débutants manquent. Un dégradé radial rayonne : les couleurs changent à mesure que l'on s'éloigne du centre. Un dégradé conique tourne : les couleurs changent à mesure que l'on balaie autour du centre. Même point central, mouvement complètement différent.

Type de dégradé	Les couleurs changent par	Utilisation typique
linear-gradient()	Distance le long d'une ligne	Arrière-plans, boutons, fondus
radial-gradient()	Distance du centre (anneaux)	Projecteurs, orbes doux, vignettes
conic-gradient()	Angle autour du centre (balayage)	Roues chromatiques, diagrammes circulaires, anneaux de progression

Modèle mental à retenir : linéaire se déplace, radial rayonne, conique tourne. Si votre effet nécessite quelque chose qui ressemble à une horloge, une roue ou une part de tarte, vous voulez du conique.

La syntaxe de base#

La forme minimale prend une liste de points de couleur, comme les autres dégradés :

background: conic-gradient(red, yellow, green, blue, red);

Cela balaie les couleurs en partant du haut (12 heures) et en tournant dans le sens horaire pour revenir au début. Répéter la première couleur (red) à la fin ferme la boucle afin qu'il n'y ait pas de jointure nette là où le balayage se referme.

Vous définissez presque toujours un point central aussi, car par défaut, le dégradé remplit tout l'élément et l'origine du balayage se trouve en plein centre. Nous allons ajuster ces deux éléments ensuite.

Comment créer un dégradé conique étape par étape#

Voici l'ordre de construction pratique. Suivez ces étapes et vous pourrez produire n'importe quel effet conique, d'une roue chromatique lisse à un diagramme circulaire segmenté.

Étape 1 : Définir l'angle de départ avec from#

Par défaut, le balayage commence vers le haut (direction 12 heures). Le mot-clé from fait pivoter cette origine. Utilisez-le lorsque vous souhaitez qu'une couleur commence à une position horaire spécifique.

/* Le balayage commence vers la droite (3 heures) au lieu du haut */
background: conic-gradient(from 90deg, red, blue, red);

Les angles augmentent dans le sens horaire. 0deg correspond au haut, 90deg à droite, 180deg en bas, 270deg à gauche. Si une roue semble mal orientée, ajustez from plutôt que de réorganiser chaque arrêt de couleur.

Étape 2 : Déplacer le centre avec at#

L'origine du balayage est par défaut le centre de l'élément (50% 50%). Le mot-clé at la repositionne, exactement comme pour radial-gradient. Cela est utile pour les effets décentrés et pour ne découper qu'une partie d'un élément.

/* Origine dans le coin supérieur gauche */
background: conic-gradient(from 0deg at 25% 25%, orange, purple, orange);

Vous pouvez combiner from et at dans une seule expression : conic-gradient(from 45deg at 30% 70%, ...). L'ordre compte : from vient avant at.

Étape 3 : Placer les arrêts de couleur à des degrés exacts#

C'est là que les dégradés coniques deviennent puissants. Au lieu de laisser les couleurs se mélanger uniformément, donnez à chaque arrêt un angle pour contrôler exactement sa position. Les angles vont de 0deg à 360deg autour du cercle.

background: conic-gradient(
  red 0deg,
  red 120deg,
  green 120deg,
  green 240deg,
  blue 240deg,
  blue 360deg
);

Remarquez comment chaque couleur est déclarée deux fois à la même paire d'angles. red remplit de 0deg à 120deg, puis green prend le relais à la même marque 120deg. Cette frontière partagée est le secret de l'étape suivante.

Étape 4 : Créer des bords nets pour les tranches et les diagrammes circulaires#

Lorsque deux arrêts de couleur partagent le même angle, le dégradé n'a nulle part où se fondre, vous obtenez donc une ligne nette au lieu d'un fondu. C'est ainsi que vous transformez un balayage lisse en secteurs nets. Le code de l'étape 3 fait déjà cela : trois tranches égales de 120 degrés avec des bords nets entre elles.

Pour créer un diagramme circulaire, définissez l'angle de chaque arrêt en fonction de sa part de 360 degrés. Une tranche de 25 % se termine à 90deg, une tranche de 50 % à 180deg, etc.

/* Diagramme circulaire 50 % bleu, 30 % sarcelle, 20 % ambre */
background: conic-gradient(
  #2563eb 0deg 180deg,   /* 50 % */
  #14b8a6 180deg 288deg, /* 30 % */
  #f59e0b 288deg 360deg  /* 20 % */
);
border-radius: 50%; /* transforme le carré en cercle */

La notation raccourcie couleur angleDébut angleFin est plus propre que de répéter la couleur, et les navigateurs modernes la prennent en charge. Ajoutez border-radius: 50% pour découper la boîte carrée en un véritable diagramme circulaire.

Étape 5 : Créer une roue chromatique lisse#

Pour une roue chromatique complète, balayez le spectre des teintes en utilisant HSL et laissez les couleurs se mélanger sans arrêts nets. C'est la pièce maîtresse classique des dégradés coniques.

.wheel {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: conic-gradient(
    hsl(0 90% 55%),
    hsl(60 90% 55%),
    hsl(120 90% 55%),
    hsl(180 90% 55%),
    hsl(240 90% 55%),
    hsl(300 90% 55%),
    hsl(360 90% 55%)
  );
}

Répéter hsl(0 ...) comme hsl(360 ...) ferme la boucle de manière transparente car la teinte 0 et la teinte 360 sont le même rouge. Ajustez la saturation et la luminosité pour rendre toute la roue pastel ou vive.

Obtenir ces angles correctement à la main est fastidieux, surtout pour les roues à plusieurs arrêts et les diagrammes inégaux. Plutôt que de compter les degrés dans votre tête, construisez-le visuellement avec notre générateur de dégradés CSS gratuit, faites glisser les arrêts jusqu'à ce que le résultat vous convienne, et copiez le CSS prêt à l'emploi directement.

Dégradés coniques et motifs répétés#

Ajoutez le préfixe repeating- et la balayage se répète autour du cercle autant de fois que le permet le calcul des angles. C'est ainsi que vous obtenez des soleils, des balayages radar et des fonds d'étoiles à partir d'une seule déclaration courte.

/* Étoile à 12 branches */
background: repeating-conic-gradient(
  #111 0deg 15deg,
  #fff 15deg 30deg
);

Chaque segment de 30 degrés (15 noirs, 15 blancs) se répète douze fois pour remplir les 360 degrés complets. Modifiez la largeur du segment pour ajouter ou supprimer des branches.

L'astuce du damier#

L'un des motifs coniques les plus utiles est le damier, celui que l'on voit derrière les images transparentes dans les éditeurs. Il provient d'un seul dégradé conique répété comme un petit fond de tuile.

.checker {
  background: conic-gradient(
    #ccc 0deg 90deg,
    #fff 90deg 180deg,
    #ccc 180deg 270deg,
    #fff 270deg 360deg
  );
  background-size: 24px 24px;
}

Les quatre quadrants alternent gris et blanc, et background-size réduit le dégradé en une tuile répétée. C'est bien plus léger qu'un PNG et cela s'adapte à l'infini. Si vous avez besoin d'une version raster d'un motif pour un ancien client e-mail ou une application legacy, vous pouvez toujours rendre le CSS en image, et notre convertisseur SVG en PNG gère ce type d'export proprement.

Créer des anneaux de progression#

Un dégradé conique associé à un masque circulaire permet de créer un indicateur de progression en forme de donut sans aucun JavaScript pour le visuel lui-même.

.progress {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(#22c55e 0deg 252deg, #e5e7eb 252deg 360deg);
}

Ici, 252deg représente 70% de 360, donc l'arc vert affiche 70% de progression. Mettez à jour cet angle unique avec une variable CSS et l'anneau se remplit en direct. Percez un trou au milieu avec un cercle plus petit positionné en absolu et vous obtenez un compteur à anneau propre.

Compatibilité navigateur et pièges pratiques#

conic-gradient() est pris en charge par tous les principaux navigateurs modernes (Chrome, Edge, Firefox, Safari) depuis environ 2020. Pour un public actuel, vous pouvez l'utiliser sans solution de repli. Les cas à anticiper sont les navigateurs d'entreprise anciens et les clients de messagerie, où la prise en charge des dégradés est généralement inégale.

Quelques points qui posent souvent problème :

• Il remplit la boîte, pas un cercle. Un dégradé conique sur un élément carré reste carré jusqu'à ce que vous ajoutiez border-radius: 50%. La progression est circulaire, la zone peinte ne l'est pas.
• Les bords nets nécessitent des angles identiques. Une légère ligne floue entre les tranches signifie que vos deux arrêts sont à une fraction de degré l'un de l'autre. Rendez-les identiques, comme red 120deg, green 120deg.
• Angles, pas pourcentages, pour la position. Les arrêts coniques utilisent deg (ou turn et rad). Mélanger avec % fonctionne dans les moteurs récents, mais deg est le choix clair et portable.
• Les unités turn sont pratiques. 0.5turn équivaut à 180deg. Pour les calculs de parts, turn peut être plus naturel : un quart de part fait 0.25turn.

Attention : ne comptez pas sur un dégradé conique comme seul moyen de transmettre des données dans un graphique. Associez le camembert ou l'anneau à une étiquette textuelle ou une légende pour que l'information soit accessible aux utilisateurs de lecteurs d'écran et aux modes de contraste élevé.

Pour des techniques de fond plus larges au-delà du cas conique, notre guide sur la création de fonds dégradés CSS modernes couvre la superposition de dégradés linéaires et radiaux pour la profondeur, ce qui se marie bien avec les effets angulaires présentés ici.

Mettre le dégradé conique CSS en pratique#

Le dégradé conique CSS devient indispensable dès que vous avez besoin d'un effet qui tourne autour d'un centre : une roue chromatique pour un sélecteur de couleur, un diagramme circulaire ou en anneau sans bibliothèque, un anneau de progression, un effet soleil ou un motif en damier. Le changement mental est petit mais décisif. Arrêtez de penser en distance, commencez à penser en angle, et la syntaxe s'ensuit naturellement.

Commencez par une liste de couleurs en boucle fermée pour vous familiariser, puis passez aux arrêts avec angle fixe pour des bords nets et à repeating-conic-gradient pour les motifs. Quand les calculs d'angle deviennent fastidieux, évitez l'arithmétique : ouvrez le générateur visuel de dégradé CSS, construisez l'effet à l'œil, et copiez le CSS propre dans votre feuille de style.

Foire aux questions#

Quelle est la différence entre conic-gradient et radial-gradient en CSS ? Un dégradé radial change de couleur en fonction de la distance par rapport au centre, créant des anneaux concentriques ou un effet de projecteur. Un dégradé conique change de couleur en fonction de l'angle autour du centre, tournant dans le sens horaire comme une aiguille d'horloge. Le radial rayonne vers l'extérieur ; le conique tourne autour.

Comment créer un diagramme circulaire avec conic-gradient en CSS ? Attribuez à chaque part une couleur avec un angle de début et de fin correspondant à sa part de 360 degrés, en utilisant des angles identiques pour des bords nets. Par exemple, une part de 25 % s'étend de 0deg 90deg. Ajoutez border-radius: 50% pour découper l'élément carré en cercle. Un générateur visuel élimine les calculs d'angles.

Pourquoi mon dégradé conique semble-t-il carré au lieu de rond ? Un dégradé conique peint toute la boîte de l'élément, qui est rectangulaire par défaut. La rotation est circulaire, mais la zone peinte n'est pas automatiquement découpée en cercle. Ajoutez border-radius: 50% à l'élément pour que les coins carrés soient masqués et que vous voyiez un cercle net.

Comment faire pivoter le point de départ d'un dégradé conique ? Utilisez le mot-clé from avec un angle, par exemple conic-gradient(from 90deg, ...). Les angles augmentent dans le sens horaire, où 0deg pointe vers le haut, 90deg vers la droite, 180deg vers le bas et 270deg vers la gauche. Ajuster from fait pivoter l'ensemble sans réorganiser vos arrêts de couleur.

Le conic-gradient est-il pris en charge par tous les navigateurs ? Oui, tous les principaux navigateurs modernes (Chrome, Edge, Firefox et Safari) prennent en charge conic-gradient() depuis environ 2020, donc les utilisateurs récents n'ont pas besoin de solution de repli. Les exceptions sont les très anciens navigateurs et de nombreux clients de messagerie, où la prise en charge des dégradés est généralement peu fiable, donc fournissez une couleur de fond unie en solution de repli.

Comment créer un motif répétitif comme un damier ou un soleil ? Utilisez repeating-conic-gradient() avec des arrêts basés sur des angles, puis définissez background-size pour contrôler la tuile. Un soleil alterne deux couleurs en petits segments de degrés, et un damier utilise quatre arrêts de quadrant réduits à une petite taille de tuile. Les deux s'affichent à l'infini sans fichiers image.