<h1 class="neon">N<span>E</span>ON</h1>About this animation
Glowing neon lettering built from layered text-shadow values, with a stepped flicker animation on one letter.
How it works
The glow comes from stacking several text-shadow layers with growing blur, from white through a hot pink halo. One letter sits in a span and has a keyframe animation with steps(1), which jumps between full and low opacity at fixed moments, imitating a faulty neon tube. The jumps are what make it look electrical rather than smooth.
Ways to customise it
- Change #ff2d95 in the shadows to pick another neon colour.
- Move the percentages in the fk keyframes to flicker more or less often.
- Wrap more letters in spans to flicker them separately.
Good to know
Flashing content can be a problem for some people, so the animation is disabled under prefers-reduced-motion. Keep the flicker slow and short, and avoid using it for important text.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.