CSS Neon Glow Effects with Box Shadow: Examples and Code

Neon glow effects on the web use layered box-shadows, not images or JavaScript. A few CSS lines produce convincing neon on any element. Here are the patterns.

How Neon Glow Works in CSS

Real neon tubes glow intensely at the center and fade outward. CSS mimics this with multiple box-shadow layers at different spreads and opacities — tight and bright close in, diffuse and dim further out.

/* Single layer — flat, unconvincing */
box-shadow: 0 0 20px cyan;

/* Multi-layer — realistic neon falloff */
box-shadow:
  0 0 4px cyan,
  0 0 10px cyan,
  0 0 20px cyan,
  0 0 40px rgba(0, 255, 255, 0.5);

Each layer is identical except for the blur radius and optional opacity reduction on the outer layers. The tight inner layer defines the bright core. Each wider layer extends the visible glow radius.

Neon Color Presets

Cyan neon

.neon-cyan {
  box-shadow:
    0 0 4px #0ff,
    0 0 12px #0ff,
    0 0 24px rgba(0, 255, 255, 0.6),
    0 0 48px rgba(0, 255, 255, 0.3);
  border: 1px solid rgba(0, 255, 255, 0.5);
  background: transparent;
}

Purple neon

.neon-purple {
  box-shadow:
    0 0 4px #b44fe8,
    0 0 12px #b44fe8,
    0 0 24px rgba(180, 79, 232, 0.6),
    0 0 48px rgba(180, 79, 232, 0.3);
  border: 1px solid rgba(180, 79, 232, 0.5);
}

Green neon

.neon-green {
  box-shadow:
    0 0 4px #00ff88,
    0 0 12px #00ff88,
    0 0 24px rgba(0, 255, 136, 0.6),
    0 0 48px rgba(0, 255, 136, 0.3);
  border: 1px solid rgba(0, 255, 136, 0.5);
}

Neon effects work on dark backgrounds only. On white, the glow blends into the background and disappears.

Sell Custom Apparel — We Handle Printing & Free Shipping

Animated Neon Pulse

Real neon flickers and pulses. A CSS animation on box-shadow intensity creates the same effect.

@keyframes neon-pulse {
  0%, 100% {
    box-shadow:
      0 0 4px #0ff,
      0 0 12px #0ff,
      0 0 24px rgba(0, 255, 255, 0.6);
  }
  50% {
    box-shadow:
      0 0 2px #0ff,
      0 0 6px #0ff,
      0 0 12px rgba(0, 255, 255, 0.3);
  }
}

.neon-pulse {
  animation: neon-pulse 2s ease-in-out infinite;
}

Keep the animation slow (1.5-3 seconds) for a calm ambient pulse. Under 1 second feels like a broken light.

Neon on Buttons and CTAs

Neon effects work especially well on CTA buttons in dark UIs.

.btn-neon {
  background: transparent;
  border: 1px solid #58a6ff;
  color: #58a6ff;
  padding: 12px 28px;
  border-radius: 4px;
  box-shadow:
    0 0 6px rgba(88, 166, 255, 0.5),
    inset 0 0 6px rgba(88, 166, 255, 0.1);
  transition: box-shadow 0.25s ease;
  cursor: pointer;
}

.btn-neon:hover {
  box-shadow:
    0 0 12px rgba(88, 166, 255, 0.8),
    0 0 24px rgba(88, 166, 255, 0.4),
    inset 0 0 12px rgba(88, 166, 255, 0.15);
}

The inset shadow gives the button a slight internal glow. The hover state intensifies it. The transparent background plus border-only style is characteristic of neon sign aesthetics.

Frequently Asked Questions

Do neon glow effects work without JavaScript?

Yes. All neon glow effects here are pure CSS box-shadow. No JavaScript, no canvas, no SVG filters required.

Why does the neon effect not show on a white background?

Glow effects require a dark background to be visible. The colored shadows blend into white backgrounds. Wrap the element in a dark container or use neon effects only in dark mode.

Can I use neon glow on text?

Box-shadow applies to the element bounding box, not the text outline. For text-following glow, use text-shadow instead. The values are similar: text-shadow: 0 0 8px cyan, 0 0 20px cyan.