← All effects

Neon Flicker

TextVanilla JS · zero dependenciestext-shadow only · no canvas
-- fps
prefers-reduced-motion detected — steady glow, no flicker

X-ray · layers

the halo around the tubes
random power dips
each tube fails on its own

Parameters

Your sign 
Glow size18 px
Flicker rate1.2 / s
Dip depth0.85
Buzz length140 ms
your version · updates as you tinker

How this effect works

A neon letter is really two lights in one: the bright tube itself and the soft halo it throws on the wall. Here both are drawn with text-shadow — a tight white shadow plays the tube's hot core, and two wide pink shadows play the halo. Turn the glow layer off and you're left with flat letters: the "neon" was never in the font, only in the shadows.

The flicker is a tiny bit of honest randomness. A few times per second we roll a die; when it comes up, one letter "loses power" — for a brief buzz window its brightness snaps randomly between dim and lit every frame, exactly like a failing tube arcing, then it settles back to full. The per-letter layer is what sells the realism: real signs never fail as a whole — one tired tube stutters while the rest hold steady. Switch it off and the whole sign dips together, which reads more like a power cut than a moody bar.

Production notes: respects prefers-reduced-motion (steady glow, zero flicker) · styles only change on the letters that are mid-buzz — a resting sign costs nothing per frame · your text goes in via textContent, never raw HTML · flashing is kept gentle and sub-3Hz-per-letter by the buzz window; avoid maxing rate and dip together on accessibility-sensitive pages · the copied snippet is self-contained HTML + CSS + JS.