La fonction radial-gradient() permet de créer une {{cssxref("<image>")}} CSS représentant un dégradé de couleur. Ce dégradé diffuse depuis une origine, le centre du gradient. La valeur renvoyée par cette fonction est un objet CSS de type {{cssxref("<gradient>")}}.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
De façon analogue aux autres types de dégradés, un dégradé radial n'est pas une couleur ({{cssxref("<color>")}}) CSS mais une image sans dimension intrinsèque (c'est-à-dire que celle-ci ne possède pas de taille naturelle ou préférée ni de proportion). Sa taille réelle correspondra à la taille de l'élément auquel le gradient s'applique.
Note : La fonction radial-gradient ne permet pas d'obtenir des dégradés radiaux répétés. Pour obtenir un tel effet concentrique, on pourra utiliser la fonction CSS {{cssxref("repeating-radial-gradient")}}.
Note : Une valeur de type <gradient> est également une valeur de type <image>. On peut donc utiliser des dégradés à n'importe quel endroit où on peut utiliser des images. En revanche, un dégradé n'est pas une valeur de type {{cssxref("<color>")}} et ne peut donc pas être utilisé avec les propriétés manipulant ces valeurs (par exemple {{cssxref("background-color")}}).
Les dégradés radiaux sont définis par trois notions :
Pour obtenir un dégradé radial, on trace des formes uniformes concentriques, identiques à la formes de terminaison en partant du centre. Les points de couleur sont positionnés sur un rayon virtuel qui s'étend horizontalement depuis le centre et vers la droite. Lorsqu'on positionne ces points avec des pourcentages, la valeur sera relative au rayon total qui est la distance entre le centre et la forme de terminaison. Chaque forme a une seule couleur qui est déterminée par la couleur du point d'intersection entre le rayon et la forme.
Les formes de terminaisons peuvent prendre deux formes :
circle)ellipse)./* Un dégradé qui part du centre du conteneur, qui commence en rouge, passe par du bleu et finit en vert. */ radial-gradient(circle at center, red 0, blue, green 100%)
<position>center.<shape>circle (la forme du dégradé sera un cercle de rayon constant) ou ellipse (la forme est une ellipse alignée sur les axes). La valeur par défaut est ellipse.<linear-color-stop>0% ou 0) indiquera le centre du dégradé. La valeur 100% correspondra à l'intersection entre la forme de terminaison et le rayon virtuel. Les valeurs intermédiaires seront situées de façon proportionnelle.<color-hint><extent-keyword>| Constante | Description |
|---|---|
closest-side |
La forme de terminaison du dégradé touche le côté de la boîte le plus proche du centre (pour les cercles) ou touche les côtés horizontaux et verticaux les plus proches du centre (pour les ellipses). |
closest-corner |
La forme de terminaison du dégradé est dimensionnée afin de toucher exactement le coin de la boîte le plus proche du centre. |
farthest-side |
Cette valeur fonctionne de façon semblable à closest-side, sauf que ce seront les côtés les plus éloignés qui seront utilisés. |
farthest-corner |
La valeur par défaut. Cette valeur fonctionne de façon semblable à closest-corner, sauf que ce sera le coin le plus éloigné qui sera utilisé. |
cover et contain, respectivement synonymes des valeurs standards farthest-corner et closest-side. Seules les valeurs standards doivent être utilisées, certaines implémentations ont d'ailleurs déjà retirées les anciennes formes.radial-gradient( [ circle || {{cssxref("<length>")}} ] [ at {{cssxref("<position>")}} ]? ,
| [ ellipse || [ {{cssxref("<length>")}} | {{cssxref("<percentage>")}} ]{2}] [ at {{cssxref("<position>")}} ]? ,
| [ [ circle | ellipse ] || <extent-keyword> ] [ at {{cssxref("<position>")}} ]? ,
| at {{cssxref("<position>")}} ,
<color-stop-list> [ , <color-stop-list> ]+ )
avec <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
et <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
et <linear-color-stop> = <color> [ <color-stop-length> ]?
et <color-stop-length> = [ <percentage> | <length> ]{1,2}
et <color-hint> = [ <percentage> | <length> ]
farthest-corner.exemple {
height: 100vh;
width: 200vh;
background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
}
<p class="exemple"> Yop </p>
{{EmbedLiveSample("Une_ellipse_avec_farthest-corner","250","150")}}
.exemple {
height: 100vh;
width: 100vh;
background-image: radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);
}
<p class="exemple"> Yop </p>
{{EmbedLiveSample("Un_cercle_de_16_pixels","250","150")}}
<div class="radial-gradient"></div>
.radial-gradient {
width: 240px;
height: 120px;
background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
}
{{EmbedLiveSample('Un_dégradé_simple', 120, 120)}}
<div class="radial-gradient"></div>
.radial-gradient {
width: 240px;
height: 120px;
background-image: radial-gradient(farthest-corner at 40px 40px,
#f35 0%, #43e 100%);
}
{{EmbedLiveSample('Un_dégradé_non-centré', 240, 120)}}
| Spécification | État | Commentaires |
|---|---|---|
| {{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}} | {{Spec2('CSS3 Images')}} | Définition initiale. |
{{Compat("css.types.image.gradient.radial-gradient")}}
radial-gradient(circle gold, red) fonctionne bien que la virgule entre circle et gold soit absente (cf. {{bug("1383323")}}). Le nouveau moteur de rendu CSS, Stylo, prévu pour Firefox 57, corrige ce bug.radial-gradient(), la valeur obtenue étant alors considérée comme invalide (cf. {{bug(1376019)}}). Ce point a également été corrigé avec Stylo.