Fonction CSS radial-gradient()

Page précédente Fonction pow() CSS
Page suivante Fonction ray() CSS
Retour au niveau supérieur Manuel de fonctions CSS

Définition et utilisation

CSS radial-gradient() La fonction configure la dégradation radiale comme image de fond.

La dégradation radiale est définie par son centre.

Pour créer une dégradation radiale, il faut définir au moins deux couleurs de repère.

Exemples de dégradations radiales :

Exemple

Exemple 1

Dégradations radiales de distribution uniforme des couleurs :

#grad {
  background-image: radial-gradient(red, green, blue);
}

Essayez-le vous-même

Exemple 2

Différentes dégradations radiales de distribution des couleurs :

#grad {
  background-image: radial-gradient(red 5%, green 15%, blue 60%);
}

Essayez-le vous-même

Exemple 3

Dégradé radial de forme circulaire :

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

Essayez-le vous-même

Exemple 4

Utilisation de mots-clés de différentes tailles pour les dégradés radiaux :

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}

Essayez-le vous-même

Syntaxe CSS

radial-gradient(shape size at position, start-color, ... , last-color);

Valeur	Description
shape	Définir la forme du dégradé. Les valeurs possibles sont : ellipse (par défaut) circle
size	Définir la taille du dégradé. Les valeurs possibles sont : farthest-corner (par défaut) closest-side closest-corner farthest-side
position	Définir la position du dégradé. La valeur par défaut est "center".
start-color, ... , last-color	Les indicateurs de couleur sont les couleurs que vous souhaitez présenter avec une transition en douceur entre elles. Cette valeur est composée d'une valeur de couleur, suivie d'une ou deux positions d'indicateurs de couleur optionnels (pourcentage entre 0% et 100% ou longueur le long de l'axe de dégradé).