# Dégradés oniriques : pastels vaporeux et lumière douce

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

Les dégradés oniriques ressemblent à la lumière du petit matin à travers un rideau : pâles, vaporeux et légèrement chauds. Voici ce qui les fait fonctionner, huit codes à copier et l’encre qui se lit dessus.

## The short version

- Un dégradé onirique utilise des couleurs pâles et peu saturées, proches en teinte, fondues sans aucun bord net.
- L’impression de rêve vient de la lumière : une zone douce et lumineuse décentrée, qui s’estompe dans un fond brumeux.
- Les dégradés oniriques se lisent mieux avec une encre profonde et teintée, comme le prune ou l’ardoise, plutôt qu’avec un texte blanc ou noir pur.
- Fondre en OKLCH garde les couleurs pâles propres au milieu, là où un fondu sRGB peut devenir crayeux ou gris.
- Un grain fin empêche les dégradés pâles de former des bandes quand ils sont compressés pour les réseaux sociaux.

Un **dégradé onirique** est un fondu pâle et vaporeux de couleurs voisines, du lilas vers la pêche, du rose poudré vers la crème, éclairé d’un seul point doux pour ressembler à de la lumière plutôt qu’à de la peinture. Trois choses le font fonctionner : des teintes peu saturées, des transitions si douces qu’on ne voit pas où s’arrête une couleur, et un cœur lumineux décentré. Voici huit codes à copier, une méthode pour créer le vôtre et l’encre qui garde les mots lisibles sur un fond aussi clair.

## Ce qui rend un dégradé onirique

L’onirique est une ambiance, alors il aide d’en nommer les éléments. Un dégradé onirique est surtout très clair : presque chacune de ses couleurs passerait pour du blanc dans une pièce sombre. Les teintes sont voisines, donc le fondu ne traverse jamais le gris. Et la lumière a une direction. Une zone est plus claire et plus chaude, comme si le soleil était juste hors champ, et tout le reste s’en éloigne dans la brume.

- Crème du matin: #fdf6f0
- Voile rosé: #fbe3e8
- Brume lilas: #efe1fb
- Ciel poudré: #dde7fb
- Lumière pêche: #fde8d4
- Encre prune: #4a3352

Cinq teintes qui vont ensemble et une encre profonde. Les teintes partagent la même luminosité, donc deux d’entre elles se fondent toujours proprement ; le prune est pour les mots.

Comparez avec un [dégradé pastel](https://gradiently.design/fr/guide/pastel-gradients), qui peut être plat et joyeux, ou un [dégradé flou](https://gradiently.design/fr/guide/blurry-gradient), qui peut être de n’importe quelle couleur. L’onirique se situe entre les deux : des couleurs pastel, une lumière floutée et un léger voile par-dessus.

## Codes de dégradés oniriques à copier

Chacun est une seule valeur CSS. Les dégradés radiaux à ellipse décentrée donnent l’impression d’une source lumineuse ; les deux linéaires sont pour les bannières et les bandes longues, où un radial paraîtrait déséquilibré.

- Premières lueurs: `radial-gradient(ellipse 90% 70% at 30% 25%, #fde8d4 0%, #fbe3e8 35%, #efe1fb 70%, #f6f2fb 100%)`
- Matin lilas: `radial-gradient(ellipse 80% 80% at 70% 30%, #fbe3e8 0%, #efe1fb 45%, #dde7fb 100%)`
- Lueur de fenêtre: `radial-gradient(ellipse 100% 70% at 50% 0%, #fff4e6 0%, #fde2e4 40%, #e9e3f7 100%)`
- Brume marine: `radial-gradient(ellipse 85% 75% at 25% 70%, #e0f2f1 0%, #e6e9fb 45%, #f5e9f7 100%)`
- Brume d’heure dorée: `radial-gradient(ellipse 90% 80% at 65% 60%, #fcefd8 0%, #f8dde0 40%, #e8dcef 80%, #dcd6ea 100%)`
- Nacre: `linear-gradient(160deg in oklch, #f9e7ef 0%, #ece3fa 50%, #dfeafb 100%)`
- Crépuscule nuageux: `linear-gradient(180deg, #dfe6f7 0%, #ecdff3 45%, #fbe6dc 100%)`
- Lavande au clair de lune: `radial-gradient(ellipse 80% 70% at 40% 35%, #f3e8ff 0%, #d9d3f2 45%, #b8b6dc 100%)`

Huit dégradés oniriques. L’arrêt le plus profond de chacun reste pâle, et c’est ce qui garde l’ambiance douce.

Lavande au clair de lune est le seul à avoir un bord un peu plus profond. Il convient aux thèmes du soir, aux applis de sommeil et aux playlists de berceuses, où une crème pure paraîtrait trop lumineuse.

## Créer votre propre dégradé onirique

1. **Choisissez une famille de teintes** Prenez deux ou trois teintes situées dans un quart de tour environ du cercle chromatique : rose, lilas et bleu, ou pêche, rose poudré et lilas. Des opposés comme la pêche et le bleu se rejoignent dans le gris, le problème décrit dans [les dégradés boueux](https://gradiently.design/fr/guide/muddy-gradients).
2. **Montez la luminosité, baissez la saturation** Poussez chaque couleur près du blanc. En OKLCH, visez une luminosité d’environ 0,92 à 0,96 et une chroma sous 0,05 environ. La couleur doit être une suggestion, pas une affirmation.
3. **Placez la lumière** Mettez l’arrêt le plus chaud et le plus clair au centre d’une ellipse et décalez ce centre, en général vers un coin supérieur. Une lumière qui vient de quelque part, c’est ce qui transforme le pâle en onirique.
4. **Étirez les arrêts** Espacez largement les arrêts pour qu’aucune bande ne fasse moins d’un tiers du cadre. Des arrêts serrés créent des anneaux, et les anneaux brisent la brume.
5. **Ajoutez un soupçon de grain** Une fine couche de bruit à très faible opacité donne à la surface un aspect de pellicule ou de papier et masque les bandes. [Les dégradés granuleux](https://gradiently.design/fr/guide/grainy-gradients) montre comment.

Construit selon les étapes: `radial-gradient(ellipse 95% 75% at 28% 22%, oklch(0.97 0.03 60) 0%, oklch(0.94 0.04 10) 40%, oklch(0.92 0.045 300) 75%, oklch(0.93 0.035 260) 100%)`

Lumière pêche en haut à gauche, rose poudré, puis lilas et un bleu léger au bord opposé. Chaque arrêt dépasse 0,9 de luminosité.

## Un fond en dégradé onirique en CSS

Un dégradé radial donne une lumière. Deux ou trois, superposés sur une base pâle, donnent cette qualité nuageuse et flottante qu’on appelle onirique. Fondez en OKLCH pour garder des milieux propres ; [l’interpolation des dégradés](https://gradiently.design/fr/guide/gradient-interpolation) explique pourquoi.

```css
.dreamy {
  min-height: 100vh;
  background-color: #f6f2fb; /* fallback */
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 15% in oklch, #fde8d4 0%, transparent 70%),
    radial-gradient(ellipse 55% 60% at 85% 35% in oklch, #efe1fb 0%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 100% in oklch, #dde7fb 0%, transparent 70%),
    linear-gradient(170deg, #fbf3f6 0%, #f3eefb 100%);
}
```

Trois lumières douces sur une base pâle : pêche en haut à gauche, lilas à droite, bleu poudré qui monte du bas.

> **Les dégradés pâles forment des bandes en premier** Les fondus très clairs ont peu de valeurs de couleur distinctes entre leurs arrêts, alors une forte compression les transforme en rayures visibles. Exportez en PNG pour les réseaux sociaux et ajoutez du grain. [Les bandes dans les dégradés](https://gradiently.design/fr/guide/gradient-banding) présente les solutions.

## Mettre du texte sur un dégradé onirique

Un texte blanc disparaît sur un dégradé onirique et le noir pur paraît dur, comme un tampon administratif sur une aquarelle. La solution est une encre profonde tirée de la même famille : prune sur un fondu rose et lilas, bleu ardoise sur un fondu brumeux, brun chaud sur la pêche. Elle se lit clairement et fait toujours partie de l’image.

### À éviter

- Un texte blanc ou gris pâle
- Le noir pur en graisse épaisse
- Le cœur le plus lumineux derrière le titre
- Une écriture script fine en petite taille
- Un encadré ou une lueur derrière les mots pour sauver le contraste

### À faire

- Une encre profonde et teintée : prune, ardoise, cacao
- Des graisses regular ou medium avec un espacement généreux
- Des mots placés dans la partie la plus calme et uniforme de la brume
- Une serif ou une linéale douce à une taille assurée
- Un contraste vérifié là où chaque ligne se trouve vraiment

Une publication de citation pâle et onirique où la partie la plus claire du dégradé se trouve derrière le texte et le délave

Le cœur lumineux tombe derrière les mots et la phrase s’efface.

La même publication de citation onirique avec une zone plus calme du dégradé derrière le texte, qui se lit désormais clairement

La même publication avec la zone calme derrière les mots et une encre plus profonde.

C’est là que Gradiently montre son intérêt. Un Mark sait où sont les mots : il place sa zone la plus calme derrière eux, approfondit les couleurs près des lettres et choisit une encre claire ou foncée pour chaque ligne dans sa propre palette, si bien qu’un fond doux ne vous coûte jamais la lisibilité. Pour les règles générales, lisez [du texte sur un dégradé](https://gradiently.design/fr/guide/text-on-gradient).

## Où les dégradés oniriques fonctionnent

L’onirique se lit comme doux, personnel et sans hâte. Il convient donc à certaines marques et pas à d’autres. Un compte à rebours de promotion dans une brume lilas paraît confus ; un lancement de soin de la peau dans ce même fond paraît parfaitement juste.

- **Bien-être et soin de la peau :** lancements, routines et citations, en général en publications Instagram de 1080×1350.
- **Mariages et invitations :** une invitation de 5×7 pouces en 1500×2100 avec un lavis pêche et rose poudré et un prénom en serif.
- **Musique et audio :** un canvas Spotify en 1080×1920 ou une couverture Apple Podcasts en 3000×3000 pour des émissions calmes, de sommeil ou d’ambiance.
- **Journaux et newsletters :** un en-tête d’article Substack en 1456×816 qui installe un ton tranquille avant le premier mot.
- **Fonds d’écran et stories :** assez doux pour rester derrière des icônes ou des stickers sans lutter avec eux.

Une couverture de podcast carrée intitulée Jardin de nuit sur un fond onirique doux lavande et pêche

Une couverture de podcast en 3000×3000. Une couleur onirique dit à l’auditeur ce que l’émission fait ressentir avant même qu’il lise le titre.

Si l’onirique devient le style de votre marque plutôt que celui d’une seule publication, pensez à en faire quelque chose que personne d’autre ne peut utiliser. Chaque Mark sur Gradiently n’a qu’un propriétaire à la fois : un lilas brumeux que vous réservez reste le vôtre, rendu à neuf dans chaque format où vous créez. Pour la famille plus large des styles doux, voyez [les dégradés aurore](https://gradiently.design/fr/guide/aurora-gradients).

## FAQ

### Quelles couleurs pour un dégradé onirique ?

Des teintes pâles et peu saturées, voisines sur le cercle chromatique : rose poudré, lilas, bleu poudré, pêche et crème. Gardez chaque arrêt très clair.

### Quelle différence entre un dégradé pastel et un dégradé onirique ?

Le pastel décrit les couleurs. L’onirique ajoute une lumière douce et orientée et un voile brumeux, si bien que le dégradé paraît éclairé plutôt que plat.

### Quelle couleur de texte sur un dégradé onirique ?

Une encre profonde de la même famille, comme le prune, le bleu ardoise ou le cacao. Le blanc disparaît sur un fond pâle et le noir pur peut paraître dur.

### Pourquoi mon dégradé onirique a-t-il des rayures ?

Les fondus pâles ont peu de paliers de couleur entre les arrêts, donc la compression les révèle en bandes. Exportez en PNG, espacez les arrêts et ajoutez un grain fin.

### Comment créer un dégradé onirique en CSS ?

Superposez deux ou trois dégradés radiaux décentrés qui s’estompent vers la transparence sur une base linéaire pâle, et fondez-les `in oklch` pour garder des milieux propres.