Fonction CSS radial-gradient()

Fonctions CSS

Exemple

L'exemple suivant illustre un dégradé radial - arrêts de couleur répartis uniformément :

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

Essayez-le vous-même »

Définition et utilisation

La fonction radial-gradient() utilise un dégradé radial pour créer une "image".

Un dégradé radial est défini par son point central.

Pour créer un dégradé radial, vous devez définir deux arrêts de couleur.

Exemple de dégradé radial

Version prise en charge : CSS3

Prise en charge des navigateurs

Les nombres dans le tableau indiquent le premier numéro de version de navigateur qui prend en charge la fonction.

Le nombre spécifié par "webkit", "moz" ou "o" est le préfixe du premier numéro de version qui prend en charge la fonction.

Fonction
radial-gradient() 26.0
10.0 -webkit-		 10.0 16.0
3.6 -moz-		 6.1
5.1 -webkit-		 12.1
11.6 -o-

Syntaxe CSS

background-image: radial-gradient(shape size at position, start-color, ..., last-color);
Valeur Description
shape Déterminer le type de cercle :
  • ellipse (par défaut) : spécifie un dégradé radial elliptique.
  • circle : Spécifie un dégradé radial circulaire.
size Définit la taille du dégradé. Valeurs possibles :
  • farthest-corner (par défaut) : Spécifie le dégradé radial comme la distance du centre au point le plus éloigné du centre.
  • closest-side : Spécifie la longueur du rayon du dégradé radial comme la distance du centre au côté le plus proche du centre.
  • closest-corner : Spécifie la longueur du rayon du dégradé radial comme la distance du centre au coin le plus proche du centre.
  • farthest-side : Spécifie la longueur du rayon du dégradé radial comme la distance du centre au côté le plus éloigné du centre.
position Définit la position du dégradé. Valeurs possibles :
  • center(par défaut) : Définit le milieu comme valeur de la coordonnée y du centre du dégradé radial.
  • top: Définit la valeur de la coordonnée y avec le haut comme centre du dégradé radial.
  • bottom: Définit la valeur de la coordonnée y avec le bas comme centre du dégradé radial.
start-color, ..., last-color Utilisé pour spécifier les couleurs de début et de fin du dégradé.

Plus d’exemples

Exemple

Arrêts de couleur inégalement répartis :

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

Essayez-le vous-même »

Exemple

Dégradé radial circulaire :

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

Essayez-le vous-même »

Exemple

Utilisation de différents mots-clés de taille :

#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 »

Tutoriel CSS :Dégradés CSS3

Fonctions CSS

autres extensions