Dégradés radiaux CSS
Dégradés radiaux CSS
Un dégradé radial est défini par son centre.
Pour créer un dégradé radial, vous devez également définir au moins deux arrêts de couleur.
Syntaxe
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
Par défaut, la forme est une ellipse, la taille est le coin le plus éloigné et la position est le centre.
Dégradé radial - Arrêts de couleur régulièrement espacés (c'est la valeur par défaut)
L'exemple suivant montre un dégradé radial avec des points de couleur régulièrement espacés :
Exemple
#grad {
background-image: radial-gradient(red, yellow, green);
}
Dégradé radial - Arrêts de couleur espacés différemment
L'exemple suivant montre un dégradé radial avec des arrêts de couleur espacés différemment :
Exemple
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
Définir la forme
Le paramètre de forme définit la forme. Il peut prendre la valeur cercle ou ellipse. La valeur par défaut est ellipse.
L'exemple suivant montre un dégradé radial avec la forme d'un cercle :
Exemple
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
Utilisation de mots-clés de tailles différentes
Le paramètre taille définit la taille du dégradé. Il peut prendre quatre valeurs :
- côté le plus proche
- côté le plus éloigné
- coin le plus proche
- coin le plus éloigné
Exemple
Un dégradé radial avec des mots-clés de tailles différentes :
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60%
55%, red, yellow, black);
}
Répétition d'un dégradé radial
La fonction repeating-radial-gradient() est utilisée pour répéter les dégradés radiaux :
Exemple
Un dégradé radial répétitif :
#grad {
background-image:
repeating-radial-gradient(red, yellow 10%, green 15%);
}