Radial-gradient() - Fonction CSS

(1) Dans la syntaxe de radial-gradient() les pourcentages peuvent être utilisés de plusieurs façons :

• Pour dimensionner le dégradé. Les pourcentages sont calculés par rapport aux dimensions de l'élément.
• 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, et à la hauteur pour le positionnement vertical.
• Pour positionner les couleurs. Les pourcentages sont alors calculés par rapport à 360 degrés (un tour complet).

Schéma syntaxique de radial-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 :

• colospace est un espace de couleurs, à choisir parmi srgb, srgb-linear, display-p3., a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50, xyz-d65.
• x1 et y1 sont les dimensions du dégradé : des valeurs numériques suivies d'une des unités de dimension ou des pourcentages calculés par rapport aux dimensions de l'élément.
• x2 et y2 sont les coordonnées du centre du dégradé. Ce sont soit des valeurs numériques suivies d'une des unités de dimension, soit des pourcentages calculés par rapport à la largeur de l'élément pour x2, et par rapport à la hauteur pour y2.

Les termes utilisés sur la liste des couleurs correspondent à :

• color est une couleur définie avec l'une des syntaxes reconnues par CSS. Voir Les couleurs.
• stop1, stop2 et transition sont des valeurs numériques suivies d'une des unités de dimension ou des pourcentages évalués par rapport à la longueur de la ligne de dégradé.
• Deux couleurs au moins doivent être spécifiées en les séparant par des virgules, mais on peut en indiquer plus.

Description de la fonction radial-gradient().

La fonction radial-gradient() définit un dégradé de couleurs radial, c'est à dire qui évolue depuis le centre vers les bords de l'élément. Ce dégradé peut être substitué à une image dans toutes les propriétés qui attendent une image mais son utilisation est surtout fréquente avec background-image ou la propriété résumée background.

Pour mémoire, il existe deux autres types de dégradés : les dégradés linéaires et les dégradés coniques, ainsi que leurs variantes avec répétition.

Gradient linéaire
linear-gradient()

Gradient radial
radial-gradient()

Gradient conique
conic-gradient()

Gradient linéaire répété
repeating-linear-gradient()

Gradient radial répété
repeating-radial-gradient()

Gradient conique répété
repeating-conic-gradient()

Reportez-vous à la page sur les dégradés de couleurs pour une présentation plus complète des dégradés.

La valeur radial-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 radial-gradient().

Tous les éléments de syntaxes présentés ci-après sont cumulables dans une seule règle. Nous les présentons séparément par souci de clarté.

• background-image: radial-gradient(blue, #90ee90, pink) c1 c2 c3

  Les valeurs c1, c2, etc. sont des couleurs, séparées par des virgules. Elles peuvent être indiquées dans n'importe laquelle des syntaxes reconnues par CSS (code hexadécimal, rgb, hsl, etc. Voir Les couleurs.

  Deux couleurs au moins doivent être indiquées. Il n'y a pas de limite sur le nombre maximal de couleurs.

  Le dégradé commence au centre de l'élément et évolue vers les bords, en gardant le ratio de l'élément. C'est à dire que si l'élément est carré, le dégradé sera circulaire ; si l'élément est rectangulaire, le dégradé sera elliptique, dans les mêmes proportions que l'élément.
• background-image: radial-gradient(circle, blue, pink) f c1 c2

  Le paramètre supplémentaire f fige la forme du dégradé. Il peut prendre les valeurs suivantes :

  1. circle : le dégradé est circulaire, quelque soit la forme de l'élément sur lequel il est appliqué.
  2. ellipse : le dégradé épouse la forme de l'élément. C'est la valeur par défaut : on l'indique rarement.
• background-image: radial-gradient(at 0 25%, blue, pink) x y c1 c2

  Les paramètres x et y introduits par le mot at définissent le point de départ du dégradé. Par défaut on a vu qu'il s'agissait du centre de l'élément.
  Le point 0 0 correspond à l'angle supérieur gauche de l'élément.

  x et y sont deux valeurs numériques suivies d'une unité de dimension (voir les unités de dimension). Si ce sont des pourcentages, ils sont calculés par rapport à la largeur de l'élément pour x, et par rapport à la hauteur de l'élément pour y.

  A la place des valeurs numériques il est possible d'indiquer :
  Pour x : right, left, center.
  Pour y : top, bottom, center.
• background-image: radial-gradient(100% 30%, blue, pink) l h c1 c2

  Les paramètres l et h définissent la forme de l'ellipse du dégradé : l est la largeur de l'ellipse, h sa hauteur.

  Si une seule valeur est indiquée, le dégradé est circulaire. Note : dans le cas d'une valeur unique, les pourcentages ne sont pas acceptés.

  Ces deux paramètres sont incompatibles avec le paramètre f vu précédemment.

  Les paramètres l et h sont deux valeurs numériques suivies d'une unité de dimension (voir les unités de dimension). Si ce sont des pourcentages, ils sont calculés par rapport à la largeur de l'élément pour l, et par rapport à la hauteur de l'élément pour h.
  l et h peuvent également prendre l'une des valeurs prédéfinies suivantes :

  1. closest-side : distance du bord le plus proche.
  2. farthest-side : distance du bord le plus éloigné.
  3. closest-corner : distance du coin le plus proche.
  4. farthest-corner : distance du coin le plus éloigné.

  Ces valeurs prennent tout leur sens lorsque le dégradé n'est pas centré dans l'élément. Voici quelques exemples combinant divers dimensions de dégradés et un positionnement non centré.

  100% 30% at 70% 20%

  closest-side at 70% 20%

  farthest-side at 70% 20%

  farthest-corner at 70% 20%
• background-image: radial-gradient(blue 0%, pink 30%) c1 p1 c2 p2

  Pour chacune des couleurs, il est possible de spécifier une valeur indiquant à quel endroit se font les changements de couleurs. Lorsque ces valeurs ne sont pas spécifiées, les couleurs se répartissent également la place disponible.

  p1, p2, etc. sont des nombres suivis chacun d'une unité de dimension, ou des pourcentages. Ils doivent être énumérés dans l'ordre croissant.

  blue 0, pink 30%
• background-image: radial-gradient(blue 0% 45%, pink 55% 100%) c1 p1 p'1 c2 p2 p'2

  Lorsque deux positions sont indiquées après une valeur, cela signifie que la couleur ne varie pas entre ces deux valeurs. Dans notre exemple, le bleu s'étend de 0 à 45%, on a ensuite un dégradé entre 45% et 55%, et on termine avec la couleur rose. Le dégradé se fait donc seulement au milieu, sur une faible partie.
• background-image: radial-gradient(blue, 20%, pink) c1 p c2

  Dans cette syntaxe, une valeur de position est indiquée sans mention de couleur. Elle permet d'obtenir un dégradé non linéaire. Dans notre exemple, les deux couleurs seront mélangées en parties égales à 20% du parcours (et non pas au milieu).

  blue, 20%, pink
• background: radial-gradient(in srgb, lightBlue, pink); cs c1 c2

  La valeur cs, introduite par le mot in, permet de spécifier dans quel espace de couleurs doivent se calculer les interpolations. Par défaut les interpolations se calculent dans l'espace oklab.

  Les exemples ci-dessous montrent l'interpolation dans deux espaces de couleurs différents. Si on regarde attentivement l'interpolation en srgb on distingue une zone plus sombre dans le passage du rouge au vert, défaut qui n’apparaît pas en oklab. Cet assombrissement est plus ou moins sensible suivant les couleurs du dégradé.

  in oklab
  in srgb

  
  Voici la liste des espaces de couleurs reconnus par CSS : srgb, srgb-linear, display-p3., a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50, xyz-d65.

Exemples.

Cliquez sur les échantillons pour afficher leur code CSS.

Simulateur avec la fonction radial-gradient()

Prise en charge par les navigateurs (compatibilité).

Les dégradés de couleur sont correctement traités par l'ensemble des navigateurs actuels.

1

Dégradés
radiaux

2

Fonction
radial-gradient()

Estimation de la prise en charge globale.

96%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Chrome

Edge

Androïd Brower

Chrome pour Androïd

Opéra

Safari

Firefox

Opéra mini

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

Caniuse

Caniuse

Historique de la fonction radial-gradient().

• Module CSS - Image niveau 3

  Première description des dégradés linéaires et radials. Et description des fonctions de dégradé linear-gradient() et radial-gradient().
  

  23 Juillet 2009

  Document de travail.

  

  17 Avril 2012

  Candidat à la recommandation.

  

  

• Module CSS - Images et contenu remplacé

  Possibilité de spécifier l'espace de couleurs dans lequel les interpolations de couleurs doivent se calculer.
  

  11 Septembre 2012

  Document de travail.

  

  

  

Voir aussi : fonctionnalités concernant les images ou les dégradés.

Les dégradés de couleurs peuvent remplacer une image partout où une image est attendue. Pour cette raison, les fonctions de dégradé sont décrites dans la spécification concernant les images : CSS Images Module.

Propriétés :

Fonctions :