Seven neon signs made with text-shadow: a flickering cursive sign, two words in two tube colours, hollow outlined tubes, a link that switches on when hovered, a sign with one faulty letter, a slow breathing glow and a small menu board where only the title glows.
A pink neon sign that occasionally stutters, like a tube on its way out. Stacked text-shadows build the glow, and the flicker drops the shadows for a few irregular frames in a long loop. Under reduced motion the sign stays lit and steady.
Two words in two tube colours, cyan and violet, side by side on a brick-dark wall. Each word has its own shadow stack in its own colour, which is all a second neon colour needs.
Hollow letters with a glowing outline, closer to a real bent-glass tube than a filled glow. The outline is -webkit-text-stroke, the fill is transparent, and drop-shadow filters glow around the stroke rather than a solid shape.
A link that looks like an unlit tube at rest and switches on with a quick buzz when hovered or focused. The off state is a dim colour with no shadow; the on state adds the glow with a stepped animation that mimics the start-up flicker.
Everything is steady except one letter, which blinks out now and then, the detail that makes a neon sign believable. That letter is wrapped in a span with its own flicker animation, and the word still reads as one word.
Instead of flickering, the glow slowly swells and settles like the tube is breathing, a calmer neon for a sign-up banner. Only text-shadow blur radii change between two keyframes, on a three-second ease-in-out loop.
A small neon sign layout: a title in pink tube lettering inside a glowing frame and a plain list of items below, which stays readable because only the title glows. The frame is a border plus inset and outset box-shadows in the same colour.
Neon is several text-shadows in the same hue at growing blur radii: a tight white one for the hot core, then two or three coloured ones for the glow. More layers mean more glow but more painting work.
Light text, dark wall
Neon only reads on a dark background, and the letters themselves should be near-white with a hint of the tube colour. A fully saturated text colour looks flat.
Flicker responsibly
Flicker effects must not flash more than three times a second, which can trigger seizures. These loops flicker briefly a few times in several seconds, and stop entirely under prefers-reduced-motion.
Keep body text plain
Use neon for one sign or title. Glowing paragraphs are hard to read; set the supporting text in a normal style beside it, as the menu board does.
Frequently asked questions
Which fonts work best for neon?
Rounded or script fonts that look like bent tubes. The demos use system fonts; swap in your own web font.
Does text-shadow affect performance?
Large blurs are costly when animated across many elements. One animated sign is fine.
Can I make neon outlines?
Yes, with -webkit-text-stroke and drop-shadow filters, as in the outlined tube demo.