Neon Sign Animated Text Generator

Neon Sign draws your word as a glass tube being lit for the first time: the stroke traces itself along the letterforms, the fill blooms in behind it, then the whole sign settles into a slow pulse with the irregular flicker of a real transformer. It is the classic bar-window look — warm, slightly unreliable, and unmistakable at a glance.

N N E E O O N N N N E E O O N N

What Neon Sign is good for

How this animation is built

The glow is a real SVG filter, not a stack of shadows: feGaussianBlur widens a copy of the glyph, feColorMatrix pushes that copy toward the tube colour, and feMerge lays the sharp letterform back on top of its own halo. The reveal animates stroke-dashoffset along the outline so the tube appears to fill, then hands over to a neonPulse keyframe for the ambient breathing.

Tips for Neon Sign

Neon Sign questions

Can I change the neon tube colour?

Yes — the colour control drives both the stroke and the glow together, so the halo always matches the tube instead of drifting away from it.

Why does the flicker look uneven?

Deliberately. An evenly pulsing sign reads as a CSS effect; real neon stutters as the gas ionises, so the keyframe holds a couple of irregular dips.

Related animation styles

Browse all 96 animated text styles