Vibrant gradients: saturated codes that don't vibrate

A vibrant gradient is bright and saturated without buzzing when two rules hold: each colour sits close to its neighbour on the colour wheel, and each step changes clearly in lightness. Break the first and the middle goes muddy; break the second, by placing opposite hues of equal brightness side by side, and the edge appears to shimmer. The twelve codes below follow both rules, so they are loud in the way a poster is loud, not in the way a migraine is.

Twelve vibrant gradient codes

Why some bright gradients vibrate

Put a saturated red directly against a saturated blue of similar brightness and the boundary seems to flicker, as if the two colours can't decide which is in front. Designers call it chromatic vibration. It is strongest at hard edges, in fine lines and in coloured text, and it is why red type on a blue background is so tiring to read. The colours themselves are fine; it is the combination of opposite hue and equal lightness, touching, that causes it.

There are two fixes. Either keep the colours apart with a darker or lighter step between them, as on the right, or choose neighbours instead of opposites. Complementary colors explains when opposites are worth the trouble.

Rules for making your own vibrant gradient

Mud is the other way bright gradients fail. Blend two saturated opposites in plain sRGB and the halfway colour drops towards grey, which is covered in muddy gradients and, at a more technical level, gradient interpolation. Saturation itself is a dial, not a switch; saturation in design shows how to set it.

Vibrant gradients in CSS

Modern browsers can blend in a perceptual colour space by adding in oklch to the gradient. That keeps the middle of a wide blend as vivid as its ends. Give older browsers a hex version first.

.hero {
  /* fallback: neighbouring hues, stepped lightness */
  background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .hero {
    background: linear-gradient(135deg in oklch, #1d4ed8 0%, #db2777 100%);
  }
}

.hero h1 {
  color: #ffffff; /* white or near black, never another saturated colour */
}

Where vibrant gradients work best

Vibrant colour earns attention, so spend it where attention is the whole job: a scrolling feed, a thumbnail among twenty others, a poster across a street. It works less well where people need to read for a long time, such as documents, dashboards and long articles, where a saturated field tires the eye within a few paragraphs. There, keep the vibrant gradient to a header or a single button and let a calm surface carry the rest.

Print is the one place to expect a shock. The brightest screen colours, especially electric blues, hot pinks and acid greens, sit outside what CMYK inks can reproduce and come back noticeably duller on paper. RGB vs CMYK explains why; choose slightly deeper versions yourself and order a proof before a print run.

Words on a vibrant gradient

Saturated backgrounds swing in brightness from one end to the other, so a single text colour that reads at the dark end can disappear at the light end. Use white or near black only, set the headline where the gradient is deepest or palest, and check contrast at the worst point, not the average. Colour contrast and accessibility has the numbers to aim for.

This is where a Gradiently Mark helps with bright colour: it knows where the words are, deepens or lifts the colour near the letters, and Auto ink chooses light or dark type per line from its own palette. A saturated look stays readable at every size without a box or shadow behind the headline. For neon looks specifically, see neon gradients; for the opposite end of the dial, subtle gradients.