# Dégradés flous : une couleur douce et moderne

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

Les dégradés flous ressemblent à de la couleur vue à travers un verre dépoli ou un objectif hors mise au point. Ils sont calmes, modernes et faciles à rater. Voici la méthode, chiffres à l’appui.

## The short version

- Un dégradé flou s’obtient en plaçant quelques formes de couleur douces sur un fond puis en les floutant jusqu’à ce qu’il ne reste aucun bord.
- Les dégradés flous diffèrent des dégradés aurore : l’aurore, ce sont des rubans de lumière sur un ciel sombre, alors qu’un dégradé flou est une couleur diffuse sans direction ni structure.
- Le rayon du flou doit être grand par rapport au canevas, environ 10 à 20 % de son petit côté, sinon les formes se lisent encore comme des taches.
- Trois ou quatre couleurs voisines sur le cercle chromatique se floutent proprement ; des couleurs opposées deviennent grises là où elles se chevauchent.
- Une couleur floutée et lisse crée facilement des bandes, donc une fine couche de grain doit être ajoutée par-dessus avant l’export.

Un **dégradé flou** est une couleur sans bords : quelques formes douces sur un fond, floutées jusqu’à ce qu’il ne reste qu’une lumière qui glisse d’une teinte à l’autre. On dirait une photo prise à travers un verre dépoli, ou un objectif hors mise au point sur une ville illuminée. Cette douceur explique pourquoi il convient aux applications de bien-être, à la musique, aux soins de la peau, à la tech apaisée et aux fonds d’écran. La méthode est simple : d’abord les formes, puis beaucoup de flou, puis du grain. Les détails ci-dessous font la différence entre rêveur et barbouillé.

## Dégradés flous, dégradés aurore et mesh gradients

On confond ces trois styles parce qu’ils ont tous l’air doux. Ils viennent d’idées différentes, et choisir le bon change le brief.

| Style | À quoi il ressemble | Construit à partir de |
| --- | --- | --- |
| Dégradé flou | Couleur diffuse, sans direction, comme un flou optique | Des formes sur un fond, très floutées |
| [Dégradé aurore](https://gradiently.design/fr/guide/aurora-gradients) | Rubans ou rideaux de lumière sur un ciel sombre | Des traînées étirées avec un flux clair |
| [Mesh gradient](https://gradiently.design/fr/guide/mesh-gradients) | Des champs de couleur lisses reliés sur une grille | Des points de couleur mélangés sur un maillage |
| Dégradé linéaire | Une rampe droite d’une couleur à une autre | Des points d’arrêt le long d’une ligne |

Un dégradé flou n’a aucune structure à suivre. Si vous voyez une direction ou une forme, c’est autre chose.

## Créer un dégradé flou

1. **Choisissez un fond** Un blanc cassé pâle pour un effet aérien, une encre profonde pour un effet lumineux. Le fond remplit chaque espace laissé par les formes.
2. **Prenez trois ou quatre couleurs voisines** Des couleurs proches sur le cercle, comme rose, lilas et bleu ciel, se mélangent en teintes intermédiaires propres. Lisez les [couleurs analogues](https://gradiently.design/fr/guide/analogous-colors) pour d’autres associations.
3. **Dessinez de grandes formes qui se chevauchent** Trois à cinq cercles ou ovales, chacun couvrant un quart à la moitié du canevas. Laissez-en dépasser certains des bords.
4. **Floutez fort** Appliquez un flou gaussien d’environ 10 à 20 % du petit côté du canevas. Sur un post de 1080 pixels de large, cela fait environ 110 à 220 pixels.
5. **Ajoutez du grain** Une fine couche de bruit à 3 à 6 % d’opacité masque le banding et évite l’aspect plastique.
6. **Vérifiez en taille téléphone** Réduisez l’image. Si une forme a encore un bord visible, floutez davantage ou agrandissez la forme.

## Recettes de couleurs pour dégradés flous

Chaque échantillon approche le rendu final en un seul dégradé, pour que vous puissiez le copier directement en CSS ou utiliser ses couleurs pour vos formes. Des dégradés radiaux elliptiques décentrés s’approchent étonnamment d’un vrai flou.

- Brume matinale: `radial-gradient(ellipse 90% 70% at 25% 30%, #fbcfe8 0%, #e9d5ff 35%, #bfdbfe 70%, #f8fafc 100%)`
- Fleur de pêcher: `radial-gradient(ellipse 80% 90% at 70% 60%, #fde68a 0%, #fdba74 30%, #fda4af 60%, #fdf2f8 100%)`
- Brouillard menthe: `radial-gradient(ellipse 85% 75% at 35% 65%, #a7f3d0 0%, #99f6e4 30%, #bae6fd 65%, #f0f9ff 100%)`
- Bokeh nocturne: `radial-gradient(ellipse 70% 80% at 65% 35%, #a78bfa 0%, #6366f1 30%, #1e1b4b 70%, #0b0a1a 100%)`
- Lumières de club: `radial-gradient(ellipse 90% 80% at 30% 70%, #fb7185 0%, #c026d3 35%, #3b0764 72%, #12051f 100%)`
- Lin flouté: `linear-gradient(160deg, #e7e5e4 0%, #d6d3d1 30%, #fcd9bd 60%, #f5f5f4 100%)`

Trois pâles et trois sombres. Les flous pâles paraissent aériens et éditoriaux ; les sombres évoquent des lumières floues la nuit.

Choisissez la famille selon ce qui sera posé dessus. Les flous pâles portent bien un texte foncé et conviennent aux soins de la peau, à la papeterie, au bien-être et aux couvertures éditoriales. Les flous sombres font rayonner un texte clair et conviennent à la vie nocturne, à la musique et aux événements tardifs. Un flou neutre comme le lin sert de toile de fond discrète pour des photos produit, où la couleur ne doit jamais faire concurrence à l’objet. Pour d’autres palettes douces, voyez les [dégradés rêveurs](https://gradiently.design/fr/guide/dreamy-gradients).

## Quelle intensité de flou pour un dégradé flou

La plupart des dégradés flous échouent parce qu’ils ne sont pas assez flous. Une forme floutée de 30 pixels sur un canevas de 1080 pixels reste une forme au bord doux, qui se lit comme une tache. L’effet demande un flou assez grand pour qu’on ne sache plus où une forme se termine.

| Canevas | Taille | Flou de départ |
| --- | --- | --- |
| Post Instagram | 1080×1350 | 110 à 220 px |
| Story ou fond d’écran de téléphone | 1080×1920 | 110 à 220 px |
| Hero de site web | 1920×1080 | 110 à 220 px |
| Miniature YouTube | 1280×720 | 70 à 145 px |
| Affiche A4 à 300 dpi | 2480×3508 | 250 à 500 px |

Points de départ à 10 à 20 % du petit côté. Les grandes formes demandent moins de flou ; les petites, davantage.

## Un dégradé flou en CSS

Sur le web, deux voies existent. Des dégradés radiaux superposés qui s’estompent vers la transparence ne coûtent presque rien et s’affichent instantanément. De vrais éléments floutés paraissent plus doux et peuvent dériver, mais coûtent plus cher à dessiner. Pour un fond statique, les couches suffisent généralement.

```css
/* Route 1: layered radial gradients, no filter */
.blurry {
  background-color: #f8fafc;
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 25%, #fbcfe8 0%, transparent 70%),
    radial-gradient(ellipse 55% 60% at 80% 30%, #e9d5ff 0%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 85%, #bfdbfe 0%, transparent 70%);
}

/* Route 2: real shapes, blurred */
.blurry-live {
  position: relative;
  overflow: hidden;
  background: #f8fafc;
}
.blurry-live .blob {
  position: absolute;
  width: 50vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.8;
}
.blurry-live .blob:nth-child(1) { background: #fbcfe8; left: -10vmax; top: -10vmax; }
.blurry-live .blob:nth-child(2) { background: #e9d5ff; right: -12vmax; top: 0; }
.blurry-live .blob:nth-child(3) { background: #bfdbfe; left: 20%; bottom: -20vmax; }
```

La voie 1 donne une brume matinale douce et statique. La voie 2 utilise trois cercles floutés que vous pouvez déplacer lentement avec transform.

S’il vous faut un panneau dépoli au-dessus d’un fond flouté plutôt que le fond lui-même, c’est `backdrop-filter`, traité dans [backdrop-filter en CSS](https://gradiently.design/fr/guide/css-blur-background).

## Pourquoi les dégradés flous font bon marché, et la solution

### Barbouillé

- Des formes encore visibles comme des taches douces
- Des couleurs complémentaires qui grisent là où elles se chevauchent
- Une composition régulière et centrée
- Parfaitement lisse, avec du banding dans les fondus
- Des mots posés sur la zone la plus saturée

### Rêveur

- Un flou si large qu’aucun bord ne survit
- Des teintes voisines qui se mélangent en intermédiaires propres
- Une masse de couleur dominante, décentrée
- Un grain fin sur l’ensemble
- Des mots sur la zone la plus pâle ou la plus profonde

Le banding est le piège dans lequel tout le monde tombe, car un flou crée de longs fondus doux sur beaucoup de pixels. Un peu de grain règle le problème ; le [banding des dégradés](https://gradiently.design/fr/guide/gradient-banding) explique pourquoi. Et si deux de vos couleurs se rejoignent dans le gris, remplacez l’une par une voisine, comme décrit dans les [dégradés ternes](https://gradiently.design/fr/guide/muddy-gradients).

Une story verticale avec le mot Inspirez sur un fond flou, pâle, rose et lilas

Une Story en 1080×1920 pour une application de méditation. Couleur douce, mots courts, rien qui ait un bord.

Les Marks de Gradiently comprennent des matières douces et diffuses avec du grain intégré, et ils gardent calme la zone derrière vos mots, pour qu’un effet flou n’avale jamais le titre. Vous pouvez créer gratuitement avec n’importe quel Mark libre dans le Studio.

## FAQ

### Comment créer un dégradé flou ?

Placez trois à cinq grandes formes de couleurs voisines sur un fond uni, appliquez un fort flou gaussien d’environ 10 à 20 % du petit côté du canevas, puis ajoutez une légère couche de grain.

### Quelle différence entre un dégradé flou et un dégradé aurore ?

Un dégradé aurore a des rubans de lumière avec un flux clair, généralement sur un ciel sombre. Un dégradé flou est une couleur diffuse sans direction ni structure visible.

### Peut-on faire un dégradé flou uniquement en CSS ?

Oui. Superposez plusieurs dégradés radiaux qui s’estompent vers la transparence, ou floutez des cercles en position absolue avec `filter: blur()`.

### Pourquoi mon dégradé flou présente-t-il des bandes ?

Les longs fondus doux ont peu de nuances distinctes, donc ils montrent des rayures. Ajoutez un grain fin et exportez en PNG plutôt qu’en JPEG compressé.