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.

Dégradé
conique

Dégradé
radial

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 c2x
ety
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
ety
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 pourx
, et la hauteur poury
).Des valeurs prédéfinies peuvent être également utilisées à la place des valeurs numériquds :
Pourx
:right
,left
,center
.
Poury
:top
,bottom
,center
.background-image: conic-gradient(blue 0%, pink 10%, gold 20%, blue 100%); c1 p1 c2 p2 c3 p3 c4 p4p1
,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 couleurc1
et quep1'
est sa position de fin. Le dégradé ne se fait que entrep1'
etp2
.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 fonctionrepeat-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 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 à venirVoir 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étitionrepeating-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.