# Pink and blue gradient codes: cotton candy to neon

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

Pink and blue sit a little too far apart to blend on autopilot. Handle the middle well and you get cotton candy skies or neon signs; ignore it and you get a dull lilac smudge.

## The short version

- A pink and blue gradient blends pinks such as #f9a8d4 or #ec4899 with blues such as #93c5fd or #3b82f6, usually passing through lilac or violet in the middle.
- Because pink and blue are not direct neighbours, a straight blend between them can turn greyish in the middle, and a lilac or violet stop fixes it.
- Pale pink and blue blends read as cotton candy and need dark ink, while saturated pink and cyan on near black read as neon.
- Neither bright pink nor mid blue carries small white text well, so keep white for large headlines or for dark grounds.
- Pink and blue suit baby showers, sweet shops, creators, gaming and retro aesthetics such as vaporwave and Y2K.

A **pink and blue gradient** blends a pink like `#f9a8d4` or `#ec4899` into a blue like `#93c5fd` or `#3b82f6`. The two are a little too far apart on the colour wheel to mix cleanly by default, so the best versions pass through a lilac or violet stop in the middle. Keep the pair pale and you get cotton candy; push it saturated on a dark ground and you get neon. The codes below cover that whole range, with the fix for the middle and the text colours that work.

## Why a pink and blue gradient goes grey in the middle

Browsers mix gradient colours in sRGB by default, and between a warm pink and a cool blue that mixture can lose saturation and look slightly grey or dusty. It is not as dramatic as blending opposites, but you can see it, especially in pastel blends. The fix is to name the middle yourself: add a lilac or periwinkle stop so every point of the blend stays clear.

- Two stops, default mix: `linear-gradient(90deg, #f472b6 0%, #60a5fa 100%)`
- With a violet bridge: `linear-gradient(90deg, #f472b6 0%, #c084fc 50%, #60a5fa 100%)`

The same pink and blue, with and without a bridge stop. The second stays saturated through the centre. [Muddy gradients](https://gradiently.design/guide/muddy-gradients) explains the colour science.

In CSS you can also write `linear-gradient(90deg in oklch, #f472b6, #60a5fa)`, which keeps lightness and saturation even across the blend. The bridge stop works everywhere, though, and gives you control over exactly which lilac appears.

## Cotton candy gradients: pastel pink and blue

Pale pink drifting into baby blue feels sweet, light and a little nostalgic. Keep a soft lilac or cream between them, and set the words in a dark slate rather than white.

- Cotton candy: `linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%)`
- Baby blanket: `linear-gradient(180deg, #fce7f3 0%, #e0f2fe 100%)`
- Sugar cloud: `radial-gradient(circle at 20% 20%, #fbcfe8 0%, #ddd6fe 45%, #a5f3fc 100%)`
- Peach morning: `linear-gradient(160deg, #fff7ed 0%, #fbcfe8 40%, #c7d2fe 100%)`

Pastel pink and blue blends. Each has a lilac, periwinkle or cream step, so nothing in the middle turns dusty.

For more of the soft palette, [pastel gradients](https://gradiently.design/guide/pastel-gradients) and [pastel colour palettes](https://gradiently.design/guide/pastel-color-palettes) go wider.

> **Printing pastel pink and blue** Very pale blends can almost vanish on uncoated paper, and bright screen blues often print duller. Deepen each stop slightly for invitations and flyers, and ask for a proof. [Gradients in print](https://gradiently.design/guide/print-gradients) covers the details.

## Sky and sorbet: brighter pink and blue

Raise saturation a little and the pair turns sunny and playful: a summer sky at the end of the day, a sorbet stand, a pool party flyer. These still read as friendly rather than loud.

- Evening sky: `linear-gradient(180deg, #7dd3fc 0%, #c4b5fd 50%, #f9a8d4 100%)`
- Sorbet: `linear-gradient(120deg, #f472b6 0%, #a78bfa 50%, #38bdf8 100%)`
- Pool party: `radial-gradient(circle at 80% 80%, #fda4af 0%, #a5b4fc 45%, #7dd3fc 100%)`

Mid saturation pink and blue gradients. Ideal for summer promotions and creator content.

## Neon pink and blue gradients

Hot pink and electric cyan on near black is the signature of vaporwave, synthwave and a lot of gaming design. The dark ground is not optional: it is what makes the colours glow. Keep the neon in bands, edges or glows and leave most of the frame dark. [Neon gradients](https://gradiently.design/guide/neon-gradients) and [synthwave colours](https://gradiently.design/guide/synthwave-colors) cover the style in depth.

- Night drive: `linear-gradient(180deg, #0b0720 0%, #3b0764 55%, #ec4899 100%)`
- Neon sign: `linear-gradient(90deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%)`
- Pink lamp, cyan haze: `radial-gradient(ellipse at 20% 80%, #f0abfc 0%, #7e22ce 30%, #155e75 60%, #0b0720 85%)`
- Arcade sunrise: `conic-gradient(from 180deg at 50% 100%, #06b6d4, #8b5cf6, #ec4899, #06b6d4)`

Neon pink and blue. Pale pink and cyan both make excellent text colours on the dark parts.

## Text colours on pink and blue gradients

Both ends of a pastel pink and blue gradient are light, so dark slate text reads on the whole surface, which makes this one of the easiest pairs to set type on. Saturated versions are trickier: hot pink and mid blue are each too light for small white text. Values below use the WCAG contrast formula.

| Background | Text | Contrast | Verdict |
| --- | --- | --- | --- |
| Bubblegum `#f9a8d4` | Slate `#1e293b` | 8.1:1 | Excellent |
| Baby blue `#93c5fd` | Slate `#1e293b` | 8.1:1 | Excellent |
| Candy pink `#fbcfe8` | White | 1.4:1 | Fails |
| Hot pink `#ec4899` | White | 3.5:1 | Large headlines only |
| Blue `#3b82f6` | White | 3.7:1 | Large headlines only |
| Night `#0b0720` | Cyan `#67e8f9` | 13.6:1 | Excellent, neon as ink |

Slate scores the same on both pastel ends, so one ink works across the whole cotton candy blend.

A baby shower invitation with dark slate lettering on a soft pink, lilac and baby blue gradient

A 5×7 in invitation on cotton candy, with slate lettering.

A landscape stream announcement with pale lettering on a dark background lit with neon pink and cyan

A stream announcement on neon pink and cyan over near black.

## Where a pink and blue gradient fits

- **Baby showers and gender reveals:** the most traditional use, best in the palest pastels.
- **Sweet shops, bakeries and ice cream:** sorbet tones look edible.
- **Creators and streamers:** neon versions on dark grounds suit gaming and late night content.
- **Retro aesthetics:** vaporwave, synthwave and [Y2K aesthetic](https://gradiently.design/guide/y2k-aesthetic) designs all lean on the pair.
- **Pride:** light blue, pink and white are the colours of the transgender pride flag, so the pair appears widely in Pride month design.

## Pink and blue gradient CSS

```css
.cotton-candy {
  background: linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%);
  color: #1e293b;
}

.neon {
  background-color: #0b0720;
  background-image:
    radial-gradient(circle at 15% 85%, #ec4899 0%, transparent 40%),
    radial-gradient(circle at 85% 15%, #06b6d4 0%, transparent 40%);
  color: #fce7f3;
}
```

A pastel section with slate text, and a dark neon section with two coloured lights.

The neon pattern, two radial lights on a dark base, is easy to adapt: move the lights, change their size, add a third in violet where they meet. Keep the lights small; once they cover more than half of the frame the dark ground disappears and so does the glow. In Gradiently a Mark goes further: its light moves slowly and its type adjusts to whichever part of the blend it sits on. One design exports as a still post, or with Pro as a looping MP4 or GIF.

## FAQ

### What is a good pink and blue gradient code?

For cotton candy, try `linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%)`. For neon, `linear-gradient(90deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%)`.

### Why does my pink and blue gradient look grey in the middle?

A straight sRGB blend between a warm pink and a cool blue loses saturation halfway. Add a lilac or violet stop in the middle, or write `in oklch` after the angle.

### What colour text goes on a pastel pink and blue gradient?

A dark slate such as `#1e293b` reads on both ends at about 8:1 contrast. White fails on pastel pink and blue.

### What is a cotton candy gradient?

A pastel blend of pink and baby blue, usually with a lilac step between them, named after the sweet.

### How do I make a neon pink and blue gradient?

Use saturated pink and cyan on a near black ground, as glows or bands rather than a full fill. The dark ground is what makes the colours look lit.