Neon gradients: glow without the eye strain

A neon gradient is a blend of very saturated colours, such as hot pink, violet, electric blue, cyan or acid green, usually glowing out of a dark ground like a lit tube in a dark street. It is the most energetic kind of gradient there is. It is also the one most likely to tire the eye, because saturated colours side by side can shimmer and vibrate. The fix is not less colour but more darkness around it.

What makes a gradient look neon

Real neon signs are thin lines of intense colour surrounded by a soft halo and a dark night. To look neon on a screen, a gradient needs the same three things: colour at or near full saturation, a bright core that falls off into a glow, and a dark ground that makes the glow visible. Take away the darkness and you have a loud colour block rather than light.

Why neon strains the eyes

When two highly saturated colours of similar lightness meet at a hard edge, such as pure red text on pure blue, the edge appears to shimmer. This is often called chromatic vibration, and it makes text tiring or even hard to focus on. Red and blue next to each other can also seem to sit at different depths. Neon designs trip over both because every colour is at full strength.

Neon colour palettes

Neon palettes work best as one or two glowing colours plus a dark ground, not five neons at once. Pink and violet, or cyan and blue, are neighbours and glow together without vibrating. Pink and cyan is the classic synthwave pairing; blended through violet, it stays bright rather than going grey.

How to build a neon gradient

1. 1

   Start dark

   Fill the frame with a near-black tinted towards your neon, such as violet-black under pink.

2. 2

   Place one bright core

   Put the full-strength neon in a small area, a line, a ring or a corner, not the middle of the frame.

3. 3

   Let it fall off

   Fade the core through a deep version of the same hue into the dark, so it reads as a halo rather than a patch.

4. 4

   Add a second neon only as a neighbour

   Violet next to pink, or blue next to cyan, glows together. Opposites need darkness between them.

5. 5

   Finish with grain

   Dark halos band easily. A fine noise layer keeps them smooth; see gradient banding.

Text on neon

Set words in white or a very pale tint of your neon, never in a second neon. A soft glow in the neon colour around white letters reads as a sign; saturated letters on a saturated ground read as noise. Keep body text off the brightest glow and in the darkest area, and check contrast as you would on any dark background; see dark gradient backgrounds.

.neon-title {
  color: #fff0fa; /* pale pink, not neon */
  text-shadow:
    0 0 4px #ff2d95,
    0 0 16px #ff2d95,
    0 0 40px rgb(255 45 149 / 0.6);
}

.neon-panel {
  background: #07020a;
  box-shadow:
    0 0 0 1px rgb(0 224 255 / 0.6),
    0 0 24px rgb(0 224 255 / 0.35);
  border-radius: 16px;
}

Where neon gradients fit

Print needs a special note. Screen neons are brighter than ordinary CMYK inks can reproduce, so they print dull. Fluorescent spot inks can get close; ask your printer, and read print gradients first. For a softer take on glowing colour, see aurora gradients, and for the retro version, vaporwave colours.

Neon comes alive in motion. A slow pulse on a dark ground makes a strong Story or Reel background, and in Gradiently, designs made with a claimed Mark export as 5 to 30 second seamless loops at the pace you choose.