# Dégradé conique CSS : cercles, camemberts et reflets

[Canonical HTML page](https://gradiently.design/fr/guide/css-conic-gradient)

conic-gradient() balaie la couleur autour d’un point comme l’aiguille d’une horloge. Cette seule idée dessine cercles chromatiques, camemberts, anneaux, reflets métalliques et éclats.

## The short version

- Un dégradé conique CSS place les couleurs autour d’un point central, en balayant dans le sens horaire depuis le haut, au lieu de suivre une ligne ou de s’étendre en anneaux.
- Les arrêts de couleur d’un dégradé conique utilisent des angles ou des pourcentages d’un tour complet : 25 % et 90deg désignent la même position.
- Les arrêts nets transforment un dégradé conique en parts, ce qui est la façon la plus rapide de dessiner un camembert en CSS.
- Le mot-clé from fait tourner le départ du balayage, et at déplace le point central.
- repeating-conic-gradient() répète ses arrêts autour du cercle et, combiné à background-size, dessine des damiers et des éclats.

Un **dégradé conique CSS** balaie la couleur autour d’un point central, comme l’aiguille d’une horloge parcourt son cadran. Là où un dégradé linéaire change le long d’une ligne et un dégradé radial en s’éloignant du centre, `conic-gradient()` change avec l’angle. Il part du haut, tourne dans le sens horaire et s’utilise partout où le CSS accepte une image. C’est l’outil naturel des cercles chromatiques, des camemberts, des anneaux de chargement et des reflets angulaires du métal brossé.

Un cercle chromatique simple: `conic-gradient(#ef4444, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444)`

Sept arrêts répartis régulièrement sur un tour complet. Répéter la première couleur à la fin ferme la couture en haut.

Si vous choisissez un type de dégradé pour un design plutôt que d’apprendre la syntaxe, les [types de dégradés](https://gradiently.design/fr/guide/types-of-gradients) et le guide de design des [dégradés coniques](https://gradiently.design/fr/guide/conic-gradient) sont de meilleurs points de départ.

## La syntaxe de conic-gradient()

```css
/*               start angle   centre        stops */
conic-gradient(from 90deg at 30% 50%, #0ea5e9, #6366f1, #0ea5e9)

/* stops as angles or as percentages of the turn */
conic-gradient(#f59e0b 0deg 90deg, #1e293b 90deg)
conic-gradient(#f59e0b 0% 25%, #1e293b 25%)
```

Tout ce qui précède la première virgule est facultatif. Les deux listes d’arrêts des deux dernières lignes dessinent la même part d’un quart.

| Élément | Exemple | Par défaut |
| --- | --- | --- |
| Angle de départ | `from 45deg` | `from 0deg`, tout droit vers le haut |
| Centre | `at 30% 50%`, `at top left` | `at center` |
| Interpolation | `in oklch`, `in hsl longer hue` | sRGB pour les couleurs hex |
| Position d’un arrêt | `90deg`, `0.25turn`, `25%` | répartis régulièrement sur le tour |

Les éléments de conic-gradient(). Les positions des arrêts se mesurent autour du cercle, pas le long d’une ligne.

Les angles tournent dans le sens horaire depuis le haut : `90deg` est trois heures, `180deg` six heures. La définition complète est sur la [page MDN de conic-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient). La prise en charge est universelle dans les versions actuelles de Chrome, Edge, Safari et Firefox depuis des années : aucun préfixe n’est nécessaire.

## Faire tourner et déplacer le balayage

`from` fait tourner tout le dégradé, pratique quand la couture entre la première et la dernière couleur tomberait sinon en haut. `at` déplace le centre. Le placer dans un coin transforme le cercle en éventail de rayons, et le sortir tout à fait de la boîte donne un léger lavis incliné qui ne ressemble plus du tout à un cercle.

- from 0deg, centré: `conic-gradient(from 0deg, #1e1b4b, #7c3aed, #f472b6, #1e1b4b)`
- from 180deg : couture en bas: `conic-gradient(from 180deg, #1e1b4b, #7c3aed, #f472b6, #1e1b4b)`
- at 0% 100% : un éventail depuis le coin: `conic-gradient(at 0% 100%, #1e1b4b, #7c3aed 30deg, #f472b6 60deg, #fde68a 90deg)`

La même famille indigo, violet et rose, tournée et déplacée. Dans la version en coin, un quart de tour remplit la boîte.

## Camemberts et anneaux en CSS

Donnez à chaque part un début et une fin, et faites démarrer chacune là où la précédente s’est arrêtée. Écrire `0` comme seconde position d’arrêt est un raccourci : une position inférieure à la précédente est ramenée à elle, donc la nouvelle couleur commence exactement là où la dernière finit. Arrondissez l’élément avec `border-radius: 50%` et percez un trou avec un masque radial pour transformer le camembert en anneau.

```css
.pie {
  width: 12rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    #6366f1 0 40%,   /* 40% */
    #22d3ee 0 65%,   /* 25% */
    #f59e0b 0 85%,   /* 20% */
    #e2e8f0 0        /* the rest, 15% */
  );
}

.donut {
  /* same background as .pie, then a hole */
  mask: radial-gradient(farthest-side, transparent 58%, #000 59%);
}
```

Un camembert à quatre parts, et la ligne qui le transforme en anneau. Utilisez des propriétés personnalisées pour les pourcentages si les données changent.

Parts du camembert : 40, 25, 20 et 15 %: `conic-gradient(#6366f1 0 40%, #22d3ee 0 65%, #f59e0b 0 85%, #e2e8f0 0)`

L’arrière-plan du camembert seul. Sur un élément rond, il se lit comme un graphique.

> **Les graphiques ont aussi besoin de vrai texte** Un dégradé est une image : les lecteurs d’écran ne peuvent donc pas lire ses valeurs. Mettez les chiffres en texte ou dans un tableau à côté du graphique, ou donnez à l’élément `role="img"` et un `aria-label` qui les énonce.

Les bords nets d’un dégradé conique peuvent paraître légèrement dentelés le long des lignes de parts dans certains navigateurs. Si cela vous gêne, laissez une fraction de degré entre les arrêts, comme `#6366f1 0 39.8%, #22d3ee 40.2% 65%`, pour que le bord ait un soupçon de fondu.

## Cercles chromatiques avec interpolation de teinte

Un cercle chromatique demande en général six ou sept arrêts. Avec les méthodes d’interpolation, vous pouvez demander au navigateur de parcourir lui-même le cercle des teintes. `longer hue` prend le long chemin entre deux teintes, et quand les deux arrêts ont la même couleur, le long chemin est le cercle entier : deux rouges donnent donc un spectre complet.

```css
.wheel {
  border-radius: 50%;
  background: conic-gradient(in hsl longer hue, #ff0000, #ff0000);
}
```

Une couleur, deux fois, et un arc-en-ciel complet entre les deux. Les [dégradés OKLCH](https://gradiently.design/fr/guide/css-gradient-oklch) expliquent shorter et longer hue.

## Reflets métalliques et éclats

Le vrai métal brossé et les disques polis captent la lumière en bandes angulaires, exactement ce que dessine un dégradé conique. Alternez quelques gris clairs et sombres, à l’espacement irrégulier, et la surface se lit comme du métal. Superposée à faible opacité sur une couleur, la même astuce ajoute un reflet aux boutons et aux cartes ; voyez les [boutons dégradés](https://gradiently.design/fr/guide/css-gradient-button) pour un exemple travaillé.

- Acier brossé: `conic-gradient(from 20deg, #9ca3af, #f9fafb 12%, #6b7280 30%, #e5e7eb 48%, #4b5563 62%, #f3f4f6 80%, #9ca3af)`
- Disque doré: `conic-gradient(from 200deg, #92400e, #fde68a 15%, #b45309 35%, #fef3c7 55%, #78350f 75%, #92400e)`

Des bandes claires et sombres irrégulières balayées autour du centre se lisent comme du métal poli.

## Dégradés coniques répétés pour les motifs

`repeating-conic-gradient()` répète sa liste d’arrêts autour du tour. De courts arrêts nets donnent des éclats. Associé à `background-size`, un motif de quarts bicolores se répète en damier, un motif autrement pénible à dessiner avec des dégradés. Plus de détails dans les [motifs CSS](https://gradiently.design/fr/guide/css-patterns).

- Soleil rayonnant: `repeating-conic-gradient(#fbbf24 0 10deg, #f97316 10deg 20deg)`
- Rayons de nuit: `repeating-conic-gradient(from 45deg at 50% 50%, #0f172a 0 15deg, #1e293b 15deg 30deg)`

De courts arrêts nets répétés tout autour.

```css
.checkerboard {
  background: repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%) 0 0 / 32px 32px;
}
```

Un damier de 16 pixels : la grille de transparence classique derrière les éditeurs d’images.

## FAQ

### Qu’est-ce qu’un dégradé conique en CSS ?

C’est un dégradé dont les couleurs changent avec l’angle autour d’un point central, en partant du haut et en tournant dans le sens horaire, écrit avec `conic-gradient()`.

### Comment faire un camembert en CSS ?

Utilisez des arrêts nets dans un dégradé conique, comme `conic-gradient(#6366f1 0 40%, #22d3ee 0 65%, #e2e8f0 0)`, sur un élément avec `border-radius: 50%`. Mettez aussi les valeurs en texte pour les lecteurs d’écran.

### Comment faire pivoter un dégradé conique ?

Ajoutez `from` et un angle comme premier argument, par exemple `conic-gradient(from 90deg, ...)`. Le balayage part alors de trois heures au lieu du haut.

### Pourquoi les bords de mon dégradé conique sont-ils dentelés ?

Les arrêts nets n’ont aucun fondu, et certains navigateurs tracent la frontière sans lissage. Laisser une fraction de degré entre arrêts voisins l’adoucit.

### Les dégradés coniques fonctionnent-ils dans tous les navigateurs ?

Oui, les versions actuelles de Chrome, Edge, Safari et Firefox prennent en charge `conic-gradient()` et `repeating-conic-gradient()` sans préfixe.