← Back to gallery
CSS

Neon Glow Layering with Text Shadow

A CSS text-shadow stack that separates a crisp neon core, colored halo layers, restrained flicker, and a static reduced-motion glow fallback.

neon-flickerglowtext-shadowblurreduced-motion

Neon flicker · text-shadow stack

Neon Glow Layering Text Shadow

Multiple text-shadow radii build a crisp neon core, a colored halo, and a slower outer bloom without replacing the live text node. Three variants demonstrate a cyan-magenta street sign, an amber utility tube, and a quiet blue ambient glow.

Cyan core · magenta halo

Street Sign

A sign-style lockup separates the bright text core from the surrounding colored bloom. The flicker is deliberately sparse; most frames stay readable and the shadow stack does the visual work.

  • text-shadow
  • flicker
  • halo

Amber tube · short spark

Console Warning

An amber tube treatment uses tighter blur radii for utility labels that still need to scan quickly. Fewer outer shadows so the glow does not muddy neighboring controls.

  • amber glow
  • utility label
  • low blur

Soft blue · no hard dropout

Quiet Glow

A slower blue glow reads as ambience rather than a broken electrical sign. Good for headers where the neon language is useful but rapid flicker would distract from navigation.

  • ambient
  • soft bloom
  • steady core

Neon inspector

Street Sign

  • text-shadow
  • flicker
  • halo

A sign-style lockup separates the bright text core from the surrounding colored bloom. The flicker is deliberately sparse; most frames stay readable and the shadow stack does the visual work.

.neon-word {
  display: inline-block;
  color: #f0fdff;
  font-weight: 800;
  letter-spacing: 0.06em;
  /* Layered shadow stack: tight white core → mid-blur accent halo →
     wide outer accent-2 bloom. The core stays steady; outer layers
     carry the flicker. */
  text-shadow:
    0 0 3px currentColor,
    0 0 12px #22d3ee,
    0 0 28px #f472b6,
    0 0 48px #22d3ee;
  animation: neon-flicker 2.50s steps(8, end) infinite;
}

@keyframes neon-flicker {
  0%, 38%, 62%, 100% {
    opacity: 1;
    text-shadow:
      0 0 3px currentColor,
      0 0 12px #22d3ee,
      0 0 28px #f472b6,
      0 0 48px #22d3ee;
  }
  44% {
    opacity: 0.85;
    text-shadow:
      0 0 2px currentColor,
      0 0 6px #22d3ee,
      0 0 14px #f472b6;
  }
  56% {
    opacity: 1;
    text-shadow:
      0 0 4px currentColor,
      0 0 16px #22d3ee,
      0 0 36px #f472b6,
      0 0 60px #22d3ee;
  }
}

@media (prefers-reduced-motion: reduce) {
  .neon-word { animation: none; }
}