# Dreamy gradients: hazy pastels and soft light

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

Dreamy gradients look like early light through a curtain: pale, hazy and slightly warm. Here is what makes them work, eight codes to copy, and the ink that reads on them.

## The short version

- A dreamy gradient uses pale, low saturation colours that sit close together in hue, blended with no hard edges.
- The dreamy feeling comes from light: one soft, bright area placed off centre, fading into a hazy ground.
- Dreamy gradients read best with a deep, tinted ink such as plum or slate rather than white or pure black text.
- Blending in OKLCH keeps pale colours clean in the middle, where an sRGB blend can turn chalky or grey.
- A fine grain stops pale gradients from banding when they are compressed for social media.

A **dreamy gradient** is a pale, hazy blend of colours that sit close together, lilac into peach, blush into cream, lit from one soft point so it looks like light rather than paint. Three things make it work: low saturation tints, edges so soft you can't see where one colour stops, and a bright core placed off centre. Below are eight codes you can copy, a method for building your own, and the ink that keeps words readable on something so light.

## What makes a gradient look dreamy

Dreamy is a mood, so it helps to name the parts. A dreamy gradient is mostly very light: almost every colour in it would pass for white in a dim room. The hues are neighbours, so the blend never crosses through grey. And the light has a direction. One area is brighter and warmer, as if the sun were just out of frame, and everything else falls away from it into haze.

- Morning cream: #fdf6f0
- Blush veil: #fbe3e8
- Lilac haze: #efe1fb
- Powder sky: #dde7fb
- Peach light: #fde8d4
- Plum ink: #4a3352

Five tints that belong together and one deep ink. The tints share a lightness, so any two of them blend cleanly; the plum is for words.

Compare that with a [pastel gradient](https://gradiently.design/guide/pastel-gradients), which can be flat and cheerful, or a [blurry gradient](https://gradiently.design/guide/blurry-gradient), which can be any colour at all. Dreamy sits between them: pastel colours, blurred light, and a little haze over the top.

## Dreamy gradient codes to copy

Each of these is a single CSS value. Radial gradients with an off centre ellipse give the sense of a light source; the two linear ones are for banners and long strips where a radial would look lopsided.

- First light: `radial-gradient(ellipse 90% 70% at 30% 25%, #fde8d4 0%, #fbe3e8 35%, #efe1fb 70%, #f6f2fb 100%)`
- Lilac morning: `radial-gradient(ellipse 80% 80% at 70% 30%, #fbe3e8 0%, #efe1fb 45%, #dde7fb 100%)`
- Window glow: `radial-gradient(ellipse 100% 70% at 50% 0%, #fff4e6 0%, #fde2e4 40%, #e9e3f7 100%)`
- Sea mist: `radial-gradient(ellipse 85% 75% at 25% 70%, #e0f2f1 0%, #e6e9fb 45%, #f5e9f7 100%)`
- Golden hour haze: `radial-gradient(ellipse 90% 80% at 65% 60%, #fcefd8 0%, #f8dde0 40%, #e8dcef 80%, #dcd6ea 100%)`
- Mother of pearl: `linear-gradient(160deg in oklch, #f9e7ef 0%, #ece3fa 50%, #dfeafb 100%)`
- Cloud dusk: `linear-gradient(180deg, #dfe6f7 0%, #ecdff3 45%, #fbe6dc 100%)`
- Moonlit lavender: `radial-gradient(ellipse 80% 70% at 40% 35%, #f3e8ff 0%, #d9d3f2 45%, #b8b6dc 100%)`

Eight dreamy gradients. The deepest stop in any of them is still pale, which is what keeps the mood soft.

Moonlit lavender is the only one with a slightly deeper edge. It suits evening themes, sleep apps and lullaby playlists, where pure cream would feel too bright.

## How to build your own dreamy gradient

1. **Pick a hue family** Choose two or three hues that sit within about a quarter turn of the colour wheel: pink, lilac and blue, or peach, blush and lilac. Opposites like peach and blue meet in grey, which is the problem described in [muddy gradients](https://gradiently.design/guide/muddy-gradients).
2. **Raise the lightness, lower the saturation** Push every colour close to white. In OKLCH, aim for a lightness around 0.92 to 0.96 and a chroma under about 0.05. The colour should be a suggestion, not a statement.
3. **Place the light** Put the warmest, lightest stop at the centre of an ellipse and move that centre off the middle, usually to a top corner. Light that comes from somewhere is what turns pale into dreamy.
4. **Stretch the stops** Spread the stops wide so no band is narrower than a third of the frame. Tight stops make rings, and rings break the haze.
5. **Add a whisper of grain** A fine noise layer at very low opacity makes the surface feel like film or paper and hides banding. [Grainy gradients](https://gradiently.design/guide/grainy-gradients) shows how.

Built from the steps: `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%)`

Peach light in the top left, blush, then lilac and a faint blue at the far edge. Every stop is above 0.9 lightness.

## A dreamy gradient background in CSS

One radial gradient gives one light. Two or three, layered over a pale base, give the drifting, cloudy quality people mean by dreamy. Blend in OKLCH so the middles stay clean; [gradient interpolation](https://gradiently.design/guide/gradient-interpolation) explains why.

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

Three soft lights over a pale base: peach top left, lilac right, powder blue rising from the bottom.

> **Pale gradients band first** Very light blends have few distinct colour values between their stops, so heavy compression turns them into visible stripes. Export as PNG for social posts and add grain. [Gradient banding](https://gradiently.design/guide/gradient-banding) covers the fixes.

## How to put text on a dreamy gradient

White text disappears on a dreamy gradient and pure black looks harsh, as if someone stamped a form onto a watercolour. The answer is a deep ink taken from the same family: plum on a pink and lilac blend, slate blue on a misty one, a warm brown on peach. It reads clearly and still feels part of the picture.

### Avoid

- White or pale grey type
- Pure black in a heavy weight
- The brightest core sitting behind the headline
- Thin script at small sizes
- A box or glow behind the words to rescue contrast

### Do

- A deep tinted ink: plum, slate, cocoa
- Regular or medium weights with generous spacing
- Words placed in the calmer, even part of the haze
- A serif or soft sans at a confident size
- Contrast checked where each line actually sits

A pale dreamy quote post where the brightest part of the gradient sits behind the text and washes it out

The bright core lands behind the words and the line goes faint.

The same dreamy quote post with a calmer area of the gradient behind the text, which now reads clearly

The same post with the calm area behind the words and a deeper ink.

This is where Gradiently earns its place. A Mark knows where the words are: it moves its calmest region behind them, deepens the colours near the letters and picks light or dark ink per line from its own palette, so a soft background never costs you legibility. For the general rules, read [text on a gradient](https://gradiently.design/guide/text-on-gradient).

## Where dreamy gradients work

Dreamy reads as gentle, personal and unhurried. That makes it right for some brands and wrong for others. A discount countdown in lilac haze feels confused; a skincare launch in it feels exactly right.

- **Wellness and skincare:** product drops, routines and quotes, usually as Instagram posts at 1080×1350.
- **Weddings and invitations:** a 5×7 in invitation at 1500×2100 with a peach and blush wash and a serif name.
- **Music and audio:** a Spotify canvas at 1080×1920 or an Apple Podcasts cover at 3000×3000 for calm, sleep or ambient shows.
- **Journals and newsletters:** a Substack post header at 1456×816 that sets a quiet tone before the first word.
- **Phone wallpapers and stories:** soft enough to sit behind icons or stickers without fighting them.

A square podcast cover called Night Garden on a soft lavender and peach dreamy background

A podcast cover at 3000×3000. Dreamy colour tells a listener what the show feels like before they read the title.

If dreamy is becoming your brand's look rather than one post, consider making it something nobody else can use. Every Mark on Gradiently has one owner at a time, so a hazy lilac you claim stays yours, rendered fresh at every size you design in. For the wider family of soft looks, see [aurora gradients](https://gradiently.design/guide/aurora-gradients).

## FAQ

### What colours make a dreamy gradient?

Pale, low saturation tints that sit near each other on the colour wheel: blush, lilac, powder blue, peach and cream. Keep every stop very light.

### What is the difference between a pastel and a dreamy gradient?

Pastel describes the colours. Dreamy adds soft, directional light and haze, so the gradient looks lit rather than flat.

### What text colour works on a dreamy gradient?

A deep ink from the same family, such as plum, slate blue or cocoa. White disappears on pale backgrounds and pure black can feel harsh.

### Why does my dreamy gradient have stripes?

Pale blends have few colour steps between stops, so compression shows them as bands. Export as PNG, widen the stops and add a fine grain.

### How do I make a dreamy gradient in CSS?

Layer two or three off centre radial gradients that fade to transparent over a pale linear base, and blend them `in oklch` to keep the middles clean.