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

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

Si vous choisissez un type de dégradé pour un design plutôt que d’apprendre la syntaxe, les types de dégradés et le guide de design des dégradés coniques sont de meilleurs points de départ.

La syntaxe de conic-gradient()

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

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(). 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.

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.

.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%);
}

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.

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

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 pour un exemple travaillé.

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.

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