CSS - Fonction conic-gradient()

Description de la fonction `conic-gradient()`.

La fonction conic-gradient() définit un dégradé de couleurs conique. Ce type de dégradé évolue autour du centre, contrairement au dégradé radial qui évolue à partir du centre.

Voici un comparatif des trois types de dégradé : linéaire, radial et conique.

Exemple avec la fonction conic-gradient()

Dégradé
conique

Exemple avec la fonction radial-gradient()

Dégradé
radial

Exemple avec la fonction linear-gradient()

Dégradé
linéaire

Reportez-vous à la page présentation générale des dégradés pour des explications et une présentation générale des dégradés en CSS.

La fonction conic-gradient() peut être utilisée avec :

background-image : Image d'arrière-plan.
border-image : Résumé des propriétés des bordures réalisées avec des images.

Syntaxe de la fonction `conic-gradient()`.

La fonction conic-gradient(), comme les autres fonctions de dégradé, accepte de multiples syntaxes :

background-image: conic-gradient(blue, pink, gold); c1 c2 c3

c1, c2, etc. désignent les couleurs du dégradé, dans n'importe laquelle des notations reconnues par CSS (code hexadécimal, couleur nommée, code RGB ou HSL, etc.). Voir les couleurs CSS.

Deux couleurs au moins doivent être précisées : il n'y a pas de limite maximale sur le nombre de couleurs.
background-image: conic-gradient(blue, pink, blue); c1 c2 c3

Pour éviter une rupture brutale entre la couleur de départ et la couleur de fin, il suffit que la première et la dernière couleur soient identiques.
background-image: conic-gradient(from 45deg, blue, pink, gold); a c1 c2 c3

a désigne l'angle de départ du dégradé. Par défaut le dégradé commence en haut (angle=0). Les angles évoluent ensuite dans le sens horaire.

L'angle est introduit par le mot from. C'est une valeur numérique positive ou négative, suivie d'une unité d'angle (voir les unités angulaires en CSS).
background-image: conic-gradient(at 50% 0, blue, pink); x y c1 c2

x et y désignent les coordonnées du centre autour duquel le dégradé se déroule. Par défaut le centre du dégradé est au centre de l'élément.

x et y sont deux valeurs numériques positives ou négatives, suivies d'une unité de dimension (voir les unités de dimensions en CSS). S'il s'agit de pourcentages, ils sont calculés par rapport aux dimensions de l'élément (la largeur pour x, et la hauteur pour y).

Des valeurs prédéfinies peuvent être également utilisées à la place des valeurs numériquds :
Pour x : right, left, center.
Pour y : top, bottom, center.
background-image: conic-gradient(blue 0%, pink 10%, gold 20%, blue 100%); c1 p1 c2 p2 c3 p3 c4 p4

p1, p2, etc. désignent les positions des couleurs. Par défaut les couleurs se répartissent également sur la circonférence du dégradé.

Ce sont des valeurs numériques positives ou négatives, suivies d'une unité d'angle (voir les unités angulaires en CSS). S'il s'agit de pourcentages, ils sont calculés par rapport à une révolution complète de 360 degrés.
background-image: conic-gradient(blue 0% 40%, pink 60% 100%); c1 p1 p1' c2 p2 p2'

Pour chacune des couleurs, deux positions ont été indiquées. La couleur ne varie pas entre ces deux positions. On peut considérer que p1 est la position de début de la couleur c1 et que p1' est sa position de fin. Le dégradé ne se fait que entre p1' et p2.

Exemples.

Les dégradés coniques sont plus esthétiques lorsqu'ils sont utilisés sur des éléments circulaires ou elliptiques. Ce qui peut s'obtenir, comme dans ces exemples, avec la propriété border-radius. Cliquez sur les exemples pour afficher leur code CSS.

Voici d'où vient le nom "conique"

Un CD
Cet exemple aurait pu être fait plus simplement avec la fonction repeat-radial-gradient()

Un graphique en secteurs
Pour des ruptures franches entre les couleurs, celles-ci ont été répétées sur deux positions successives.

Le même graphique en secteurs avec une syntaxe différente utilisant deux positions pour chaque couleur.

Un cercle chromatique
(roue des couleurs)
Voir la fonction hsl().

Un damier. L'astuce est de définir une taille du fond (background-size) inférieure à la taille de l'élément, ce qui provoque la répétition.

Compatibilité et prise en charge par les navigateurs.

Afficher le tableau de compatibilité (informations fournies par canIuse.com).

Afficher les versions antérieures Afficher la version à venir

Voir aussi...

Arrière-plan - Propriétés.

background : Résumé des propriétés de l'arrière-plan.
background-attachment : Mode de défilement de l'image d'arrière-plan.
background-blend-mode : Définit le mélange des couleurs entre image(s) d'arrière-plan et couleur d'arrière-plan.
background-clip : Interaction entre arrière-plan et bordure.
background-color : Définit la couleur de l'arrière-plan.
background-image : Image d'arrière-plan.
background-origin : Position de l'image d'arrière-plan.
background-position : Emplacement de l'image d'arrière-plan.
background-repeat : Mode de répétition de l'image d'arrière-plan.
background-size : Dimensionnement de l'image d'arrière-plan.
isolation : Gère l'interaction entre les couches.
mix-blend-mode : Définit le mode de mélange entre le contenu et ce qui est visible en arrière-plan de l'élément.
opacity : Opacité (ou transparence).

Arrière-plan - Fonctions.

linear-gradient() : Détermine un dégradé de couleur linéaire.
radial-gradient() : Détermine un dégradé de couleur radial (depuis le centre vers les bords).
repeating-conic-gradient() : Définit un dégradé de couleurs conique, avec répétition
repeating-linear-gradient() : Détermine un dégradé de couleur linéaire avec répétition.
repeating-radial-gradient() : Détermine un dégradé de couleur radial avec répétition.

Une remarque ? Une suggestion ?...