# Dégradé radial CSS : formes, tailles et positions

[Canonical HTML page](https://gradiently.design/fr/guide/css-radial-gradient)

radial-gradient() dessine la couleur vers l’extérieur depuis un point. Voici chacune de ses parties, avec des exemples en direct, plus les astuces de calques derrière les halos doux, les projecteurs et les vignettes.

## The short version

- Un dégradé radial CSS répand la couleur vers l’extérieur depuis un point central, et s’écrit avec la fonction radial-gradient() partout où le CSS accepte une image.
- Par défaut, un dégradé radial est une ellipse, centrée dans la boîte, dimensionnée pour atteindre le coin le plus éloigné.
- Les mots-clés de taille closest-side, closest-corner, farthest-side et farthest-corner décident où tombe le dernier arrêt de couleur.
- Le mot-clé at déplace le centre, par exemple at 20% 30%, et les positions fonctionnent comme background-position.
- Superposer plusieurs dégradés radiaux qui s’estompent vers le transparent est la façon standard de construire des halos doux et des arrière-plans de type maillage en CSS.

Un **dégradé radial CSS** fond la couleur vers l’extérieur depuis un point, comme la lumière d’une lampe qui se répand. Vous l’écrivez avec `radial-gradient()` et l’utilisez partout où le CSS prend une image, en général `background-image`. Sans options, il dessine une ellipse au milieu de la boîte qui atteint le coin le plus éloigné : `radial-gradient(#fef3c7, #b45309)` donne un centre pâle qui rayonne vers un ambre profond.

Halo ambre, tous réglages par défaut: `radial-gradient(#fef3c7, #f59e0b 45%, #78350f)`

Une ellipse, centrée, dimensionnée pour le coin le plus éloigné. C’est ce que vous obtenez quand vous ne donnez que des couleurs.

Tout le reste dans la fonction change l’une de trois choses : la **forme**, la **taille** et la **position**. Une fois qu’on les maîtrise, la même fonction dessine des halos, des projecteurs, des vignettes, des soleils rayonnants et les nappes de couleur derrière un [dégradé maillé en CSS](https://gradiently.design/fr/guide/css-mesh-gradient). Pour le côté design des mélanges radiaux, voyez le guide compagnon des [dégradés radiaux](https://gradiently.design/fr/guide/radial-gradient).

## La syntaxe de radial-gradient()

```css
/* shape  size          position        stops */
radial-gradient(circle closest-side at 30% 40%, #fde047, #ea580c 60%, #1c1917)

/* everything before the first comma is optional */
radial-gradient(#fde047, #ea580c)
```

La forme et la taille peuvent venir dans n’importe quel ordre. La position suit toujours le mot at.

| Élément | Valeurs | Par défaut |
| --- | --- | --- |
| Forme | `circle` ou `ellipse` | `ellipse` |
| Taille | un mot-clé, une longueur pour un cercle, ou deux longueurs ou pourcentages pour une ellipse | `farthest-corner` |
| Position | `at` suivi de tout ce que `background-position` accepte | `at center` |
| Interpolation | `in oklab`, `in oklch` et d’autres espaces colorimétriques | sRGB pour les couleurs hex |
| Arrêts de couleur | deux couleurs ou plus avec des positions facultatives | obligatoires |

Les éléments de radial-gradient(). Seuls les arrêts de couleur sont obligatoires.

Une règle piège souvent : la taille d’un cercle doit être une longueur comme `200px`, jamais un pourcentage, car un pourcentage d’un rectangle n’a pas de rayon unique. Les ellipses acceptent les pourcentages, comme dans `ellipse 60% 40%`. La [référence MDN de radial-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient) donne la grammaire complète.

## Cercle ou ellipse

Une ellipse s’étire avec la boîte : sur une bannière large, le halo est large et sur une story haute il est haut. Un cercle reste rond quoi que fasse la boîte. Utilisez les ellipses pour des arrière-plans qui doivent remplir leur conteneur uniformément, et les cercles pour tout ce qui doit se lire comme une source de lumière, une planète ou le halo d’un bouton.

- Ellipse : suit la boîte: `radial-gradient(ellipse, #a7f3d0, #059669 50%, #022c22)`
- Cercle : reste rond: `radial-gradient(circle, #a7f3d0, #059669 50%, #022c22)`

Les mêmes arrêts menthe vers forêt. Sur une tuile large, l’ellipse s’étale sur les côtés et le cercle non.

## Mots-clés de taille : de closest-side à farthest-corner

La taille décide où tombe l’arrêt de couleur final, c’est-à-dire où se place la forme de fin du dégradé. Les quatre mots-clés mesurent depuis le centre jusqu’au côté ou au coin le plus proche ou le plus éloigné de la boîte. Ils ne se distinguent que lorsque le centre est décalé : les exemples ci-dessous partent donc tous de `30% 40%`.

- closest-side: `radial-gradient(circle closest-side at 30% 40%, #fde047, #ea580c 70%, #1c1917)`
- closest-corner: `radial-gradient(circle closest-corner at 30% 40%, #fde047, #ea580c 70%, #1c1917)`
- farthest-side: `radial-gradient(circle farthest-side at 30% 40%, #fde047, #ea580c 70%, #1c1917)`
- farthest-corner: `radial-gradient(circle farthest-corner at 30% 40%, #fde047, #ea580c 70%, #1c1917)`

Un soleil, quatre tailles. closest-side finit au bord le plus proche ; farthest-corner, le défaut, atteint le coin le plus éloigné.

En pratique, `closest-side` convient aux formes contenues comme les points et les badges, car la couleur ne déborde jamais du bord le plus proche. `farthest-corner` convient aux arrière-plans, car le mélange couvre toute la boîte. Pour un contrôle exact, donnez une longueur : `circle 180px at 50% 0` est un halo de 180 pixels suspendu au bord supérieur.

## Positionner avec at

Le mot-clé `at` place le centre avec les mêmes valeurs que `background-position` : des mots-clés comme `at top right`, des pourcentages comme `at 20% 80%`, ou des longueurs comme `at 40px 60px`. Le centre peut même se trouver hors de la boîte, comme dans `at 50% 120%`, qui donne un halo d’horizon montant de sous le bord inférieur.

- at top left: `radial-gradient(circle at top left, #c4b5fd, #6d28d9 45%, #1e1b4b)`
- at 50% 120% : horizon: `radial-gradient(ellipse at 50% 120%, #fb7185, #9f1239 45%, #0f0a1e 75%)`
- at 80% 20%: `radial-gradient(circle at 80% 20%, #7dd3fc, #0369a1 35%, #082f49)`

Déplacer le centre change l’ambiance plus que changer les couleurs.

## Halos radiaux superposés

Le motif radial le plus utile empile plusieurs dégradés dans un même `background-image`, chacun s’estompant vers `transparent`, sur une couleur sombre unie. Chaque calque est une nappe de lumière à sa propre place. Comme le premier calque est peint au-dessus, placez d’abord le halo le plus vif et le plus petit.

```css
.glow {
  background-color: #0b0a1a;
  background-image:
    radial-gradient(circle at 20% 25%, rgb(124 58 237 / 0.55), transparent 45%),
    radial-gradient(circle at 80% 30%, rgb(236 72 153 / 0.45), transparent 40%),
    radial-gradient(ellipse at 50% 110%, rgb(56 189 248 / 0.4), transparent 60%);
}
```

Trois nappes de violet, de rose et de bleu ciel sur un fond quasi noir. Changez une position et toute la composition bouge.

Deux autres motifs couvrent l’essentiel du reste. Une **vignette** assombrit les bords : `radial-gradient(ellipse, transparent 55%, rgb(0 0 0 / 0.55))` superposé à une photo. Un **projecteur** suit le pointeur quand vous alimentez sa position depuis des propriétés personnalisées, comme `radial-gradient(circle 240px at var(--x) var(--y), rgb(255 255 255 / 0.15), transparent)`, avec quelques lignes de JavaScript qui règlent `--x` et `--y` sur `pointermove`.

> **Les halos doux font facilement des paliers** Les grands estompages radiaux peu contrastés sur des fonds sombres sont là où les paliers se voient d’abord. Une légère couche de bruit par-dessus les cache ; voyez la [texture de bruit CSS](https://gradiently.design/fr/guide/css-noise-texture) et le [banding des dégradés](https://gradiently.design/fr/guide/gradient-banding).

## Dégradés radiaux répétés

`repeating-radial-gradient()` répète ses arrêts vers l’extérieur jusqu’à remplir la boîte : une paire d’arrêts nets devient des anneaux. Utilisez des longueurs pour les positions d’arrêt afin que la largeur des anneaux reste constante. C’est la base des ondulations, des cibles et des textures de type demi-teinte ; le guide des [motifs CSS](https://gradiently.design/fr/guide/css-patterns) en dit plus.

- Anneaux marine: `repeating-radial-gradient(circle at 50% 50%, #0f172a 0 10px, #1e3a8a 10px 20px)`
- Ondulations d’angle: `repeating-radial-gradient(circle at 0 100%, #fef3c7 0 6px, #f59e0b 6px 9px, #fef3c7 9px 18px)`

Des arrêts nets à longueurs fixes transforment un dégradé radial en anneaux.

### À éviter

- Des pourcentages pour la taille d’un cercle, ce qui est invalide
- Des halos vifs qui finissent en bord net car le dernier arrêt est opaque
- Centrer chaque halo à 50 % 50 %
- Cinq halos superposés de force égale

### À faire

- Des longueurs pour les cercles, des pourcentages pour les ellipses
- Estomper chaque halo vers `transparent`
- Placer les halos hors du centre, près des coins ou sous le bord
- Un halo dominant et un ou deux plus discrets

## FAQ

### Comment faire un dégradé circulaire en CSS ?

Utilisez `radial-gradient(circle, couleur1, couleur2)`. Ajouter `circle` garde la forme ronde ; sans lui, vous obtenez une ellipse qui s’étire avec la boîte.

### Comment déplacer le centre d’un dégradé radial ?

Ajoutez `at` et une position après la forme et la taille, par exemple `radial-gradient(circle at 20% 30%, #c4b5fd, #1e1b4b)`. Les positions fonctionnent comme `background-position`.

### Que signifie farthest-corner ?

Cela dimensionne le dégradé pour que son dernier arrêt de couleur atteigne le coin de la boîte le plus éloigné du centre. C’est la taille par défaut.

### Un dégradé radial circulaire peut-il utiliser une taille en pourcentage ?

Non. Un cercle demande une seule longueur comme `200px`. Les ellipses peuvent utiliser deux pourcentages, comme `ellipse 60% 40%`.

### Comment faire un effet de halo avec des dégradés CSS ?

Superposez une ou plusieurs valeurs `radial-gradient()` qui passent d’une couleur semi-transparente à `transparent`, sur une `background-color` sombre.