Neon Glow Pulse — Pure CSS Animation with Source Code

The Neon Glow Pulse replicates the electric flicker and hum of a real neon light tube sign using only CSS text-shadow and box-shadow animations. By stacking multiple shadow layers with increasing blur radii and alternating their intensity, the browser renders a convincing neon glow that pulses rhythmically.

How It Works

CSS text-shadow accepts a comma-separated list of shadows, each with an offset, blur, and color. By omitting the X/Y offset (0 0), all shadows radiate from the center — exactly like a light glow. Stacking 5-6 of these with different blur values (4px → 8px → 20px → 40px → 80px) creates a multi-layer soft halo. The two @keyframes animations alternate the blur intensity to simulate flickering.

Use Cases

• Cyberpunk or sci-fi themed websites
• Gaming dashboards and scoreboards
• Nightclub, bar, or event landing pages
• Developer portfolio titles with a retro-tech aesthetic
• Marketing banners and product launch pages

How to Customize

• Change neon color: Replace #e100ff (purple-magenta) with any color: #00f5ff (cyan), #ff003c (red), #adff2f (green)
• Change text: Replace NEON with your brand name or any word
• Change pulse speed: Modify 2.4s in both animation declarations
• Add flicker: Randomly set animation-play-state: paused via JavaScript for a more realistic flicker effect

Frequently Asked Questions

Can I apply this glow to any HTML element, not just text?

Yes! The box-shadow version (already applied to .neon-wrap in the demo) works on any block element. You can apply box-shadow: 0 0 10px #e100ff, 0 0 30px #e100ff to buttons, cards, images — any element with a visible background or border.

How do I make the text color itself neon (glowing colored text, not white)?

Set the color to your neon color instead of #fff, then in the text-shadow, use the same color for all layers. White text with colored glow creates one look; colored text with the same colored glow creates a different, more saturated look.

Is this animation accessible?

Add @media (prefers-reduced-motion: reduce) { .neon-text, .neon-wrap { animation: none; } } to stop the animation for users who have requested reduced motion in their OS settings.