Dreamy gradients: hazy pastels and soft light

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.

Compare that with a pastel gradient, which can be flat and cheerful, or a 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.

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

2. 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. 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. 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. 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 shows how.

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

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

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.

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.

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.

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.