How to Create Neon Text Effects with Pure CSS

Neon text is one of the most visually striking effects you can create with pure CSS. No images, no JavaScript, no canvas — just the text-shadow property layered a few times. The key insight is that real neon signs produce multiple layers of light: a bright core, a medium glow, and a wide ambient halo. We recreate this by stacking text shadows with increasing blur radii.

The Basic Neon Effect

Start with white (or very light) text on a dark background. Then layer three text shadows with the same colour but increasing blur values:

The first shadow (4px blur) creates the bright inner glow closest to the text. The second (15px) adds the visible mid-range glow. The third (40px) creates the wider atmospheric light. The fourth shadow uses a slightly different colour to add depth — this mimics how real neon tubes cast a subtly different hue at the edges.

Colour Variations

Different colours evoke different moods. Here are some popular neon palettes:

Pink / Magenta

Green

Warm (Orange-Red)

The trick with warm neon is shifting the hue slightly across layers. Start with red-orange at the core and shift toward yellow-orange in the mid layers. This mimics the way heated gas tubes emit slightly different wavelengths at different intensities.

Adding a Flicker Animation

Real neon signs flicker slightly — especially older ones. You can recreate this with a CSS animation that briefly removes the text shadow at irregular intervals:

The irregular keyframe percentages (19%, 21%, 23%, 54%, 56%) create an organic-feeling pattern rather than a mechanical on-off blink. Adjust these values to make the flicker more or less frequent.

Performance note: Animating text-shadow does trigger repaints. For a single heading this is fine, but avoid applying flicker animations to many elements simultaneously. If performance is a concern, consider using a pseudo-element with opacity transitions instead.

Making It Production-Ready

Accessibility

Neon effects rely heavily on colour and glow, which can be problematic for users with visual impairments. Always ensure the text itself is readable without the glow — the white text on dark background should meet WCAG contrast ratios on its own. Consider wrapping flicker animations in a prefers-reduced-motion media query to respect user preferences.

Font choice

Neon effects look best with bold, thick fonts that have enough surface area for the glow to wrap around. Sans-serif fonts with uniform stroke widths work especially well. Thin or serif fonts can look wispy rather than glowing. System fonts like Arial Black or web fonts with heavy weights are good choices.

Background matters

Neon text needs a very dark background to work. The glow effect is created by light-coloured shadows, which are invisible on light backgrounds. A near-black background (#0a0a1a or similar) gives the best result. Dark navy or deep purple backgrounds can add atmospheric depth.