Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

conic-gradient() - Fonction CSS

conic-gradient()

Résumé des caractéristiques de la fonction conic-gradient()

Description rapide
Définit un dégradé de couleurs conique.
Statut
Standard
Module W3C
Module CSS - Images
Références (W3C)
Statut du document:: WD (document de travail)

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.

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 linear-gradient() pour des explications plus détaillées 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.
  • list-style-image : Définit une image à utiliser à la place des puces.
  • mask-image : Désigne l'image ou le fichier SVG qui sera utilisé comme masque.

Syntaxe de la fonction conic-gradient().

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

  • colour est une couleur décrite via l'une des nombreuses syntaxes reconnues par CSS.
  • x et y sont les coordonnées du centre du dégradé. Ce sont soit des nombres suivis d'une unité de dimension, soit des pourcentages.
  • angle1 est l'angle de début du dégradé.
  • angle2 est l'angle de début de la couleur.
  • angle3 est l'angle de fin de la couleur.
  • angle4 est l'angle du milieu du dégradé entre deux couleurs. angle1 à angle4 peuvent être soit un nombre suivie d'un unité d'angle, soit un pourcentage.
Syntaxe de conic-gradient (fonction)Schéma syntaxique de la fonction CSS conic-gradient (tracé d'un dégradé conique). from angle1/%from angle1/% , at x/% y/%at x/% y/% , from ... at ... from ... at ... , colour colour angle4/% angle4/% , , angle2/% angle2/% angle3/% angle3/%conic-gradient()conic-gradient()Télécharger l'image en SVG
  • 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 CSS.

    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. 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 unité d'angle (voir les unités CSS 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 unité de dimension (voir les unités CSS 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 CSS 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.

Exemples de rendus utilisant un dégradé conique.

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.

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.

Animation de la propriété 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().

Compatibilité et prise en charge par les navigateurs.

Colonne 1
Traitement général des dégradés coniques.
Colonne 2
Prise en charge de la fonction conic-gradient()
1
Conic gradients
2
conic-gradient()
Estimation de la prise en charge en pourcentage du parc actuel.
97%
94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que conic-gradient().

Les spécifications CSS éditées par le W3C sont organisées en modules. conic-gradient() fait partie du Module CSS - Images (CSS Images Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Définit l'orientation d'une image (doit-elle être tournée ?)
Mode de mise à l'échelle des images.
Définit comment un contenu multimédia (image, vidéo) doit s'adapter aux dimensions de son contenant.
Position d'une image ou d'une vidéo par rapport à son container.

Fonctions.

Réalise le mélange de plusieurs images.
Récupère l'aspect d'un élément sous forme d'une image.
Désigne ou définit une image.
Propose au navigateur un choix d'images.
Détermine un dégradé de couleur linéaire.
Détermine un dégradé de couleur radial (depuis le centre vers les bords).
Définit un dégradé de couleurs conique, avec répétition
Détermine un dégradé de couleur linéaire avec répétition.
Détermine un dégradé de couleur radial avec répétition.
Définit une image en bande de couleurs.