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

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.

Comparez avec un dégradé pastel, qui peut être plat et joyeux, ou un dégradé flou, 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é.

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. 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.

2. 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. 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. 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. 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 montre comment.

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 explique pourquoi.

.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%);
}

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.

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é.

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.

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.