Pink and blue gradient codes: cotton candy to neon

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.

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.

For more of the soft palette, pastel gradients and pastel colour palettes go wider.

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.

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 and synthwave colours cover the style in depth.

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.

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

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

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.