← All Examples

Neon Text Effect

Glowing neon text using layered text-shadow values and a flicker CSS animation.

Published June 18, 2026

Demo

PURE CSS

NEON GLOW

no javascript

HTML

<p class="neon neon-green">PURE CSS</p>

CSS

.neon-green {
  color: #b8ff57;
  text-shadow:
    0 0 4px #b8ff57,
    0 0 10px #b8ff57,
    0 0 20px #b8ff57,
    0 0 40px #6ddf00,
    0 0 80px #6ddf00;
  animation: neon-flicker 4s infinite;
}

@keyframes neon-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: .7; filter: brightness(.8); }
}

How it works

Neon glow is created by stacking multiple text-shadow layers with increasing blur radii and matching colors. The innermost shadows are tight and bright (small blur), while outer shadows spread the glow. A flicker animation using opacity and filter: brightness at specific keyframe points — like 20%, 24%, 55% — mimics the irregular flicker of real neon signs without JavaScript.