Conic-gradient() - Fonction CSS

(1) Le pourcentages peuvent être utilisés de plusieurs façons :

• Pour positionner le centre du dégradé. Dans ce cas, les pourcentages sont calculés par rapport à la largeur de l'élément pour le positionnement horizontal, ou par rapport à la hauteur pour le positionnement vertical.
• Pour positionner les couleurs. Les pourcentages sont alors calculés par rapport à une révolution complète, soit 360°.

Schéma syntaxique de conic-gradient().

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

• colorspace est un espace colorimétrique.
• angle est une valeur numérique suivie d'une des unités d'angle ou un pourcentage calculé par rapport à 360°.
• x et y sont deux valeurs numériques suivies d'une unités de dimension ou des pourcentages calculés par rapport à la largeur de l'élément pour x, et par rapport à la hauteur pour y

Sur l'énumération des couleurs (colors-list) :

• color est une couleur décrite via l'une des nombreuses syntaxes reconnues par CSS.
• stop1 et stop2 sont des angles ou des pourcentages calculés par rapport à 360°.
• transition est un angle ou un pourcentage calculé par rapport à 360°.
• Deux couleurs au moins doivent être indiquées, séparées par des virgules, mais on peut en indiquer autant que nécessaire.

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. Si les couleurs sont bien choisies, le résultat peut suggérer un cône vu de dessus, d'où le nom "conique". Ce type de dégradé est parfois nommé "dégradé angulaire".

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 dégradés de couleurs pour des explications plus détaillées et une présentation générale des dégradés en CSS.

La valeur conic-gradient() peut être utilisée avec les propriétés suivantes :

• background-image : Définit l'image ou dégradé d'arrière-plan (plusieurs images ou dégradés peuvent coexister).
• border-image : Résumé des propriétés des bordures réalisées avec des images.
• image-set() : Propose au navigateur un choix d'images afin que ce dernier puisse choisir celle qui est le plus adapté (résolution, format...).
• list-style-image : Définit une image personnalisée à utiliser à la place des puces, dans le contexte d'une énumération sous forme de liste.
• mask-image : Désigne l'image ou le fichier SVG qui sera utilisé comme masque.

Syntaxes 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, RGB ou HSL, etc. Voir Les couleurs.

  Deux couleurs au moins doivent être précisées : il n'y a pas de limite maximale sur le nombre de couleurs.

  Le dégradé conique revient sur lui-même. 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.

  Remarque : nos exemples sont présentés dans des cercles car les dégradés coniques sont bien adapté aux formes circulaires, mais ils peuvent aussi s'appliquer à des éléments de forme rectangulaire. Un élément rond s'obtient facilement avec border-radius:50%.

• background-image: conic-gradient(from 45deg, blue, pink, gold); a c1 c2 c3

  Le paramètre 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 des unités d'angle.
• background-image: conic-gradient(at 50% 40%, 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 des unités de dimension. 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).
  x et y peuvent être des valeurs négatives ou des pourcentages supérieurs à 100%. Dans ce cas le centre du dégradé se situe en dehors de l'élément.

  Des valeurs prédéfinies peuvent être également utilisées à la place des valeurs numériques :
  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 d'angle). 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 de cette couleur. Le dégradé ne se fait que entre p1' et p2.
• background-image: conic-gradient(blue, 75%, pink); c1 p3 c2

  La valeur p3 et exprimée en angle ou en pourcentage, entre deux virgules. La syntaxe ne l'associe à aucune des couleurs du dégradé. Elle précise à quel endroit se trouve le milieu du dégradé.

  Bien entendu, cette syntaxe ext mixable avec les autres déjà vues.
• background: conic-gradient(in srgb, lightBlue, pink); cs c1 c2

  La valeur cs, introduite par le mot in, spécifie dans quel espace de couleurs doivent se calculer les interpolations.

  Voici deux exemples qui permettent de comparer le calcul dans des espaces de couleurs différents. Les couleurs ont été choisies pour que la différence soit la plus marquée possible. Avec d'autres couleurs elle serait moins sensible. En sRGB on constate une zone plus sombre entre le rouge et le vert, un défaut qui n'apparaît pas quand les calculs sont faits en okLab.

  in srgb

  in oklab

  
  Par défaut les interpolations se calculent dans l'espace oklab. Voici la liste des qutres espaces colorimétriques reconnus par CSS : srgb, srgb-linear, display-p3., a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50, xyz-d65.

Exemples d'utilisation de la fonction conic-gradient().

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.

Animation avec la fonction conic-gradient().

Les animations ci-dessous ne sont que des exemples parmi une multitude de possibilités d'animation autour des dégradés. Pour la première animation, c'est l'angle de début du dégradé qui a été animé, et pour la deuxième, c'est la position médiane du dégradé. Le code CSS est assez long car nous avons découpé l'animation en 10 étapes pour un rendu plus fluide. En effet il semblerait que la transition progressive d'une valeur à l'autre ne soit pas prise en charge avec conic-gradient().

Support de la fonction conic-gradient().

1

Dégradés
coniques

2

Fonction
conic-gradient()

Estimation de la prise en charge globale.

96%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Historique de la fonction conic-gradient().

• Module CSS - Images et contenu remplacé

  Introduction des dégradés coniques, et donc des fonction conic-gradient() et repeating-conic-gradient().
  

  11 Septembre 2012

  Document de travail.

  

  

  

Voir aussi : manipulations d'images.

Les spécifications CSS éditées par le W3C sont organisées en modules. La fonction conic-gradient() est décrite dans la spécification "module CSS - Images" (CSS Images Module).
Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

Fonctions :