# Vibrant gradients: saturated codes that don't vibrate

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

Saturated colour is the quickest way to get noticed and the quickest way to make eyes ache. These codes are bright on purpose and built so their edges never shimmer, with the reasons, so you can make your own.

## The short version

- A vibrant gradient uses highly saturated colours, but it only stays comfortable to look at when neighbouring colours are close in hue and differ clearly in lightness.
- Colours of opposite hue and similar lightness placed edge to edge appear to shimmer, an effect often called chromatic vibration.
- Saturated opposites blended directly in sRGB pass through a greyish middle, which interpolating in oklch largely avoids.
- A dark or neutral ground gives the eye somewhere to rest and makes vibrant colour look brighter than it does on white.
- Text over a vibrant gradient reads best in near black or white, never in another saturated colour of similar lightness.

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

- Mango: `linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #ef4444 100%)`
- Electric violet: `linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #c026d3 100%)`
- Lagoon: `linear-gradient(135deg, #0284c7 0%, #06b6d4 50%, #10b981 100%)`
- Flamingo: `linear-gradient(135deg, #db2777 0%, #f43f5e 50%, #fb923c 100%)`
- Lime soda: `linear-gradient(135deg, #16a34a 0%, #84cc16 55%, #facc15 100%)`
- Ultra: `linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%)`
- Cherry pop: `linear-gradient(160deg, #be123c 0%, #e11d48 45%, #f472b6 100%)`
- Glacier: `linear-gradient(135deg, #0d9488 0%, #22d3ee 50%, #818cf8 100%)`
- Pink on night: `radial-gradient(circle at 30% 30%, #f472b6 0%, #9333ea 35%, #1e1033 75%)`
- Ember: `radial-gradient(circle at 70% 75%, #facc15 0%, #f97316 30%, #7c2d12 70%)`
- Cobalt rise: `linear-gradient(180deg, #0f172a 0%, #2563eb 50%, #38bdf8 100%)`
- Coral to gold, oklch: `linear-gradient(90deg in oklch, oklch(65% 0.24 20) 0%, oklch(78% 0.17 75) 100%)`

Every blend moves through neighbouring hues while getting lighter or darker, which is what keeps it clean. The last one is written in oklch and needs a current browser.

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

- Vibrates: hard edge, equal brightness: `linear-gradient(90deg, #ff2a2a 0%, #ff2a2a 50%, #1f8fff 50%, #1f8fff 100%)`
- Calm: a dark step between: `linear-gradient(90deg, #ff2a2a 0%, #7f1d1d 42%, #0c3a66 58%, #1f8fff 100%)`

The same red and blue. On the left they touch at the same brightness and the edge shimmers; on the right a deep step separates them and both colours look stronger.

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](https://gradiently.design/guide/complementary-colors) explains when opposites are worth the trouble.

## Rules for making your own vibrant gradient

| Rule | Why | Example |
| --- | --- | --- |
| Stay within a third of the wheel | Neighbours blend without passing through grey | Indigo, violet, magenta |
| Step the lightness | Gives depth and stops edges buzzing | Deep `#1d4ed8` up to bright `#38bdf8` |
| Use one hero colour | Three equally loud colours fight | Magenta peaks; the rest supports it |
| Add a ground | A dark or neutral area lets the eye rest | Pink on night, ember |
| Blend in oklch | Keeps the midpoint saturated, not dull | Coral to gold, oklch |

Five rules behind every code above. Break one deliberately, never by accident.

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](https://gradiently.design/guide/muddy-gradients) and, at a more technical level, [gradient interpolation](https://gradiently.design/guide/gradient-interpolation). Saturation itself is a dial, not a switch; [saturation in design](https://gradiently.design/guide/color-saturation) 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.

```css
.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 */
}
```

The Ultra gradient with a three stop fallback, and a two stop oklch version that stays vivid through the middle without a helper stop.

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

| Use | Try | Size |
| --- | --- | --- |
| Sale or launch post | Mango, Flamingo | 1080×1350 |
| YouTube thumbnail | Electric violet, Ember | 1280×720 |
| App or product hero | Lagoon, Glacier | 1920×1080 |
| Story or Reel cover | Lime soda, Cherry pop | 1080×1920 |
| Playlist cover | Pink on night, Ultra | 1080×1080 |
| A4 event poster | Ultra, Cobalt rise | 2480×3508 |

Six places vibrant gradients pull their weight, with codes from the grid above and the size to design at.

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](https://gradiently.design/guide/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](https://gradiently.design/guide/color-contrast-accessibility) has the numbers to aim for.

A portrait sale post with bold type over a bright, saturated background

A loud background with plain, heavy type. The colour does the selling; the words only need to be legible.

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](https://gradiently.design/guide/neon-gradients); for the opposite end of the dial, [subtle gradients](https://gradiently.design/guide/subtle-gradients).

## FAQ

### What makes a gradient look vibrant?

Highly saturated colours that sit close together on the colour wheel, with a clear change in lightness from one end to the other.

### Why do some bright colour combinations hurt to look at?

Opposite hues of similar lightness placed edge to edge appear to shimmer. Separate them with a darker or lighter step, or choose neighbouring colours.

### How do I stop a bright gradient going grey in the middle?

Use neighbouring hues, add a middle stop, or blend in oklch with `linear-gradient(in oklch, ...)` in browsers that support it.

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

White or near black. Check contrast at the brightest and darkest point behind the words, not just the middle.

### What is a good vibrant gradient for a website hero?

Try `linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%)` with white type.