# Dégradés radiaux : le projecteur qui guide le regard [Canonical HTML page](https://gradiently.design/fr/guide/radial-gradient) Le dégradé radial est ce qui ressemble le plus, en design, au fait de braquer une lumière sur quelque chose. Voici comment le viser, le dimensionner et éviter qu’il ressemble à une cible. ## The short version - Un dégradé radial fond la couleur vers l’extérieur à partir d’un point central, en cercles ou en ellipses, au lieu de suivre une ligne droite. - Comme l’œil va vers la zone la plus lumineuse, un dégradé radial fonctionne comme un projecteur qui indique où regarder en premier. - Les dégradés radiaux les plus utiles sont décentrés, placés derrière le sujet ou en partie hors du cadre, pas en plein milieu. - Une ellipse suit la forme de son conteneur alors qu’un cercle garde ses proportions, ce qui compte sur les formats hauts et larges. - Les lueurs radiales sombres font facilement du banding : laissez-leur de la place pour s’estomper et ajoutez un peu de grain. Un **dégradé radial** est un fondu qui se diffuse vers l’extérieur à partir d’un point unique, en anneaux, au lieu d’avancer dans une seule direction. Le centre porte une couleur et chaque anneau se rapproche de la suivante. Comme notre œil va d’abord vers la zone la plus lumineuse et la plus saturée d’une image, un dégradé radial agit comme un projecteur : vous décidez où se pose l’attention, puis vous y placez votre titre, votre produit ou un visage. Ce guide porte sur l’usage des dégradés radiaux en design. Pour la syntaxe complète, voyez [radial-gradient() en CSS](https://gradiently.design/fr/guide/css-radial-gradient) ; pour la comparaison avec les dégradés linéaires, coniques et maillés, voyez [les types de dégradés](https://gradiently.design/fr/guide/types-of-gradients). ## Ce qu’un dégradé radial fait à une mise en page Un dégradé linéaire suggère une direction : une lumière venue d’en haut, un horizon, un balayage. Un dégradé radial suggère une source. Cette source devient le point focal naturel : ce qui s’y trouve paraît voulu, ce qui est placé sur les bords paraît secondaire. C’est l’un des moyens les plus simples de construire une [hiérarchie visuelle](https://gradiently.design/fr/guide/visual-hierarchy) sans ajouter la moindre forme. Projecteur: `radial-gradient(circle at 50% 38%, #fde68a 0%, #f59e0b 14%, #7c2d12 42%, #1c0a05 78%)` Une flaque de lumière chaude sur un fond presque noir. L’œil se pose sur le centre lumineux avant tout le reste. ## Cercle ou ellipse En CSS, un dégradé radial est par défaut une ellipse, étirée aux proportions de son bloc. Sur une bannière large, cela donne une lueur plate et étendue ; sur une story haute, un ovale vertical. Un cercle garde la même forme à toutes les tailles, ce qui ressemble davantage à une vraie source de lumière. - Ellipse : suit le cadre: `radial-gradient(ellipse at center, #a78bfa 0%, #4c1d95 45%, #0f0a1f 100%)` - Cercle : garde sa forme: `radial-gradient(circle at center, #a78bfa 0%, #4c1d95 45%, #0f0a1f 100%)` Mêmes couleurs, mêmes arrêts. L’ellipse s’étire avec le bloc ; le cercle reste rond. Utilisez une ellipse quand la lueur doit remplir le format de façon régulière, comme pour un vignettage. Utilisez un cercle quand le dégradé doit ressembler à une lampe, un soleil ou un halo derrière un seul objet. ## Où placer le centre Une lueur en plein centre d’un carré est le dégradé radial le plus courant, et le moins intéressant. On dirait une cible. Déplacer le centre change toute l’ambiance de la création. - Centre : statique, symétrique: `radial-gradient(circle at 50% 50%, #38bdf8 0%, #1e3a8a 40%, #020617 80%)` - En haut à gauche : une fenêtre: `radial-gradient(circle at 22% 18%, #38bdf8 0%, #1e3a8a 40%, #020617 80%)` - Sous le cadre : un horizon qui monte: `radial-gradient(circle at 50% 115%, #38bdf8 0%, #1e3a8a 45%, #020617 85%)` - En bas à droite : derrière un sujet: `radial-gradient(circle at 85% 70%, #38bdf8 0%, #1e3a8a 38%, #020617 75%)` Quatre positions d’un même dégradé. Seul le point central change. - **Derrière le sujet.** Placez la lueur juste derrière un produit ou un portrait pour le détacher du fond. - **Sur un tiers.** Une source placée près d’un tiers de la largeur ou de la hauteur paraît équilibrée sans être statique. - **Hors du cadre.** Un centre sous le canevas ou à côté donne un bord de lumière doux, comme un lever de soleil ou une lampe juste hors champ. - **Loin du texte.** Si le point le plus lumineux se trouve sous un texte blanc, le contraste chute exactement là où vous en avez le plus besoin. ## Quatre usages où les dégradés radiaux excellent ### Projecteur et mise au point Un centre lumineux sur un fond sombre désigne ce qui s’y trouve. Il convient aux photos de produit, aux affiches d’événement et aux [posts d’annonce](https://gradiently.design/fr/guide/announcement-post-design) où une seule chose compte. ### Vignettage L’inverse : un centre plus clair qui s’assombrit vers les bords. Un vignettage subtil attire l’œil vers l’intérieur et donne à un fond plat un air photographié. Gardez un écart faible, sinon on dirait un vieux filtre d’appareil photo. Vignettage papier doux: `radial-gradient(ellipse at center, #f5efe6 0%, #efe4d3 55%, #cdb89a 100%)` Un léger vignettage sur un ton papier chaud. Le centre reste dégagé pour le texte ; les coins s’assombrissent doucement. ### Lueur et halo Un petit cercle saturé qui s’estompe vers la transparence se lit comme une lumière émise par quelque chose : une enseigne néon, un écran, une icône. Superposez-en deux ou trois à différentes positions et vous êtes à mi-chemin d’un [dégradé aurore](https://gradiently.design/fr/guide/aurora-gradients). ### Champs de couleur Empilez plusieurs dégradés radiaux aux bords transparents et ils se fondent en un champ doux et organique. C’est ainsi que l’on imite la plupart des [dégradés maillés en CSS](https://gradiently.design/fr/guide/css-mesh-gradient). ```css .poster { background: radial-gradient(circle at 20% 25%, rgb(244 114 182 / 0.85) 0%, transparent 45%), radial-gradient(circle at 80% 30%, rgb(56 189 248 / 0.75) 0%, transparent 50%), radial-gradient(circle at 50% 95%, rgb(250 204 21 / 0.7) 0%, transparent 55%), #0f0a1f; } ``` Trois lueurs qui s’estompent vers la transparence sur un fond sombre. Le premier calque de la liste est au-dessus. ## Dégradés radiaux et texte Une affiche d’événement en portrait avec un titre sur une zone lumineuse du fond Une affiche où la zone éclairée se trouve derrière le titre. Une story verticale avec une courte ligne de texte posée dans une zone calme et sombre du fond Une story dont le texte reste dans le champ calme et plus sombre. Décidez lequel des deux rôles a la lueur. Soit elle encadre les mots, avec un texte sombre sur le centre clair, soit elle encadre l’espace à côté des mots, avec un texte clair sur le pourtour sombre. Les ennuis commencent quand le bord de la lueur coupe une ligne de texte, car le contraste change en cours de route. [Le texte sur un dégradé](https://gradiently.design/fr/guide/text-on-gradient) explique comment trouver la zone calme. ## Problèmes courants des dégradés radiaux ### À éviter - Une lueur centrée sur chaque création, comme une cible - Un anneau net là où deux arrêts sont trop proches - Une lueur sombre qui s’estompe sur une courte distance et fait des bandes - Une ellipse étirée par accident sur une bannière large ### À faire - Placer la source là où seraient le sujet ou la lumière - Espacer les arrêts pour que la décroissance ressemble à une vraie lumière - Donner aux lueurs sombres un long fondu et un peu de grain - Choisir exprès le cercle ou l’ellipse pour chaque format Le banding est le point à surveiller. Une lueur du bleu marine profond au noir couvre très peu de niveaux de couleur sur une grande surface, et fait donc des paliers. Laissez le fondu s’étendre plus loin et ajoutez du grain, comme l’explique [le banding des dégradés](https://gradiently.design/fr/guide/gradient-banding). ## FAQ ### Qu’est-ce qu’un dégradé radial ? Un dégradé radial fond les couleurs vers l’extérieur à partir d’un point central, en cercles ou en ellipses, plutôt que le long d’une ligne droite comme un dégradé linéaire. ### Quelle différence entre un dégradé radial en cercle et en ellipse ? Une ellipse s’étire pour suivre les proportions de son conteneur, alors qu’un cercle garde la même forme ronde à toutes les tailles. En CSS, la valeur par défaut est l’ellipse. ### Quand utiliser un dégradé radial plutôt qu’un linéaire ? Utilisez un dégradé radial pour un point focal, une lueur ou un vignettage. Utilisez un dégradé linéaire pour une direction, comme une lumière venue d’en haut ou un horizon. ### Pourquoi mon dégradé radial ressemble-t-il à une cible ? Il est sans doute centré, avec des arrêts trop rapprochés. Décentrez-le ou placez-le hors du cadre, et espacez les arrêts pour que la lumière s’estompe progressivement.