Fonction radial-gradient
La fonction radial-gradient définit un dégradé
radial. Cette fonction est appliquée aux propriétés qui
définissent une image d'arrière-plan : background,
background-image
ou une image de bordure : border-image,
background-image-source.
Syntaxe
sélecteur {
background: radial-gradient([forme type position], couleur1 taille1, couleur2 taille2...);
}
Valeurs
| Valeur | Description |
|---|---|
| forme |
Valeurs acceptées :
ellipse dégradé elliptique (par défaut),
circle dégradé circulaire.
|
| type |
Définit l'étirement du dégradé.
Valeurs acceptées :
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| position |
Après le mot-clé at
est indiquée une position dans toutes les unités de taille
ou à l'aide des mots-clés top, bottom,
left, right, center
dans diverses combinaisons.
|
| couleur1 | Couleur de départ du dégradé dans toutes les unités de couleur. |
| couleur2 | Couleur de fin du dégradé dans toutes les unités de couleur. |
| taille | Définit l'étendue d'une couleur spécifique du dégradé dans toutes les unités de taille. |
Valeurs pour le type
| Valeur | Description |
|---|---|
closest-side |
La forme du dégradé correspond au côté le plus proche du bloc. |
closest-corner |
La forme du dégradé est calculée sur la base de la distance jusqu'au coin le plus proche du bloc. |
farthest-side |
Le dégradé s'étend jusqu'au côté le plus éloigné du bloc. |
farthest-corner |
La forme du dégradé est calculée sur la base de la distance jusqu'au coin le plus éloigné du bloc. |
Remarque
Le type et la forme peuvent être intervertis, mais la position doit venir à la fin du premier paramètre. Le type de dégradé et sa taille ne fonctionnent pas ensemble (logique, car ils entrent en conflit). C'est la taille qui l'emporte.
Exemple . L'option la plus simple
Définissons simplement la couleur de départ et la couleur de fin :
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Exemple . Ajoutons une position
Définissons la position du centre :
30px - décalage à gauche, 100px - décalage en haut :
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Exemple . Position en pourcentages
Définissons la position du centre en pourcentages :
30% - décalage à gauche, 50% - décalage en haut :
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Exemple . Position par mot-clé
On peut utiliser les mots-clés
top, bottom, left,
right, center dans diverses
combinaisons. Plaçons, par exemple, le dégradé
à droite au centre :
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Exemple . Taille du dégradé
Dans ce cas, le dégradé fonctionnera ainsi :
de 0px à 20px ce sera du rouge pur,
de 20px à 60px - un dégradé
du rouge au bleu, après 60px - du bleu pur :
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Exemple . Plusieurs couleurs successives
Dans ce cas, le dégradé fonctionnera ainsi :
de 0px à 20px ce sera du rouge pur,
de 20px à 40px
ce sera du bleu pur, de 40px
à 60px - un dégradé du bleu au vert,
après 60px - du vert pur :
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Exemple . Taille + position
Définissons simultanément les tailles pour les différentes couleurs et la position du centre du dégradé :
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Exemple . Forme du dégradé
La forme du dégradé est définie par le premier paramètre
et peut prendre 2 valeurs : circle
(dégradé circulaire) ou ellipse (dégradé
elliptique, par défaut). Pourquoi jusqu'à présent
n'avons-nous pas vu de dégradés elliptiques, bien que
ce soit la valeur par défaut ? Parce que jusqu'à présent
la forme des blocs était carrée. Si nous modifions
la forme en rectangulaire, nous verrons un dégradé elliptique :
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Exemple . Dégradé circulaire
Créons un dégradé circulaire dans un bloc
rectangulaire. Pour cela, définissons la forme du dégradé
avec le mot-clé circle comme premier paramètre :
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Exemple . Ajoutons une position
Ajoutons également la position du dégradé au code précédent :
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Exemple . Type farthest-corner + circle
La forme du dégradé est calculée sur la base de la distance jusqu'au coin le plus éloigné du bloc :
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exemple . Type farthest-corner + ellipse
La forme du dégradé est calculée sur la base de la distance jusqu'au coin le plus éloigné du bloc :
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exemple . Type farthest-side + circle
Le dégradé s'étend jusqu'au côté le plus éloigné du bloc :
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exemple . Type farthest-side + ellipse
Le dégradé s'étend jusqu'au côté le plus éloigné du bloc :
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exemple . Type closest-corner + circle
La forme du dégradé est calculée sur la base de la distance jusqu'au coin le plus proche du bloc :
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exemple . Type closest-corner + ellipse
La forme du dégradé est calculée sur la base de la distance jusqu'au coin le plus proche du bloc :
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exemple . Type closest-side + circle
La forme du dégradé correspond au côté le plus proche du bloc :
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exemple . Type closest-side + ellipse
La forme du dégradé correspond au côté le plus proche du bloc :
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Voir aussi
-
la fonction
linear-gradient,
qui crée un dégradé linéaire -
la fonction
repeating-linear-gradient,
qui crée un dégradé linéaire répétitif -
la fonction
repeating-radial-gradient,
qui crée un dégradé radial répétitif
