CSS Glow Neon

CSS neon glow: imitating gas-discharge tubes with text-shadow

A real neon sign is a sealed glass tube filled with a noble gas — neon emits the iconic orange-red around 640 nm, argon mixed with mercury vapor goes blue, helium burns yellow, krypton turns whitish. An electric current excites the gas and each atom drops back to its ground state by releasing a photon at one very specific wavelength. The result is a saturated core of light wrapped in a softer halo where the photons scatter through the glass and the surrounding air. Reproducing this in CSS comes down to one trick: stack several text-shadow layers of the same colour with increasing blur radii so the halo decays gradually away from the glyph.

.neon {
  color: #fff;
  text-shadow:
    0 0 5px  #fff,
    0 0 10px #fff,
    0 0 20px #ff00de,
    0 0 30px #ff00de,
    0 0 40px #ff00de;
}

The recipe above gives the "hot core + cool halo" look that sells the illusion: a bright white inner glow (mimicking the over-exposed centre of a real tube) wrapped in a saturated outer halo (the gas-specific colour). The two innermost shadows are nearly white because real cameras and eyes both clip the brightest part of a saturated light source to white.

Classic neon palettes

• Hot pink #ff00de — the Vegas/Tokyo Shibuya cliché.
• Cyan #00ffff — clean, futuristic, used for "OPEN" signs.
• Acid green #39ff14 — biohazard, Matrix terminal.
• Vaporwave duo — pink + cyan together, the 80s VHS palette of Stranger Things and synthwave covers.
• Cyberpunk — magenta + electric blue over near-black, popularised by Cyberpunk 2077.

Dark background is mandatory. A neon glow on a white page looks like a dirty stain — the contrast between saturated halo and near-black canvas is what reads as "luminous". If you must support light mode, hide the glow with @media (prefers-color-scheme: light).

The flicker animation

Real neon tubes wear out and flicker — a faithful recreation alternates opacity between roughly 0.8 and 1.0 at erratic intervals. Use @keyframes with non-uniform steps and animation-timing-function: steps(1, end) so the change is instant rather than tweened:

@keyframes flicker {
  0%, 19%, 21%, 23%, 80%, 100% { opacity: 1; }
  20%, 22%, 79% { opacity: 0.85; }
}
.neon { animation: flicker 3s infinite; }

Wrap it in @media (prefers-reduced-motion: no-preference) — flicker can trigger photosensitive seizures.

Outline neon and SVG alternative

For an empty-tube look (just the outline glowing), combine -webkit-text-stroke: 1px #fff with color: transparent and the same text-shadow stack — the glyph is now hollow but still throws the halo. For complex shapes beyond text, an SVG <filter> chaining <feGaussianBlur stdDeviation="4"/> with <feMerge> gives cleaner, more controllable bloom than stacked CSS shadows.

FAQ

How do I animate the flicker? Use @keyframes alternating opacity (0.8 to 1.0) at uneven percentages with steps(1) timing — no tween, just abrupt changes, like a failing ballast.

Will five-layer shadows tank mobile performance? Each shadow is a paint pass. Five layers on a heading are fine; five layers on hundreds of list items will drop scroll frame rate. Test on a low-end Android, and reduce to three layers if it stutters.

Is neon accessible for colour-blind users? The high luminance contrast between white core and dark canvas helps — most colour-vision deficiencies still pick up brightness. Avoid red-only or green-only neon for critical text; use cyan or white-cored variants.

Why does my neon look flat compared to references? Two reasons: not enough layers (try 5+), and missing the white inner pair. Real cameras blow out the centre — without that highlight the glow looks like a soft drop-shadow instead of a self-luminous source.