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 :

radial-gradient() - Fonction CSS

radial-gradient()

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

Description rapide
Détermine un dégradé de couleur radial (depuis le centre vers les bords).
Statut
Standard
Pourcentages
Le calcul se fait différemment en fonction de l'endroit où le pourcentage est utilisé (Voir les syntaxes).
Module W3C
Module CSS - Images
Références (W3C)
Statut du document:: CRD (document proposé pour la recommandation)

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 avec la fonction linear-gradient()
Gradient linéaire
linear-gradient()
Gradient radial avec la fonction radial-gradient()
Gradient radial
radial-gradient()
Gradient conique avec la fonction conic-gradient()
Gradient conique
conic-gradient()
Gradient linéaire répété avec la fonction repeating-linear-gradient()
Gradient linéaire répété
repeating-linear-gradient()
Gradient radial répété avec la fonction radial-repeating-gradient()
Gradient radial répété
repeating-radial-gradient()
Gradient conique répété avec la fonction conic-repeating-gradient()
Gradient conique répété
repeating-conic-gradient()

Reportez-vous à la page linear-gradient() pour une présentation plus complète des dégradés.

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

     
  • 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 CSS.

    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 se é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.
  •  
  • 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 CSS 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.

  •  
  • 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 CSS 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(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 absolue ou relative. Ils doivent être énumérés dans l'ordre croissant.

  •  
  • background-image: radial-gradient(40px 100px at 0 0, blue 30%, pink 100%) l h x y c1 p1 c2 p2

    Syntaxe complète, utilisant tous les paramètres.

Exemples.

Cliquez sur les échantillons pour afficher leur code CSS.

Utilisation avec list-style-image
  • Un
  • Deux
  • Trois

Simulateur.

background :

Prise en charge par les navigateurs (compatibilité).

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

Colonne 1
Restitution des dégradés de couleurs linéaires ou radiaux.
Colonne 2
Prise en charge de la fonction CSS radial-gradient().
1
Gradients
2
radial-gradient()
Estimation de la prise en charge en pourcentage du parc actuel.
93%
97%

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

Les spécifications CSS éditées par le W3C sont organisées en modules. radial-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.

Définit un dégradé de couleurs conique.
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é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.