NEON GLOW
Generated CSS

CSS Neon Text Generator

CSS neon text effects use stacked text-shadow layers to simulate the glow of a real neon sign. Each layer uses the same color but an increasing blur radius — the tightest layer creates the bright core, while wider layers produce the outer glow that bleeds into the background.

Use the generator above to pick a glow color, set intensity and optionally add a flicker or pulse animation. Copy the complete CSS and paste it directly into your stylesheet.

How CSS Neon Glow Works

A neon effect needs at least three shadow layers. Here's the anatomy of a cyan neon:

.neon {
  color: #fff;
  text-shadow:
    0 0 4px  #00f5ff,   /* tight core glow */
    0 0 12px #00f5ff,   /* inner halo */
    0 0 24px #00f5ff,   /* mid glow */
    0 0 48px #00f5ff;   /* outer ambient */
}

Neon Color Reference

StyleHexCharacter
Cyan / Electric Blue#00f5ffClassic arcade, 80s retro
Hot Pink#ff0090Vegas strip, nightclub
Lime Green#39ff14Matrix, hacker aesthetic
Purple / Violet#bf5fffSynthwave, lofi
Orange / Amber#ff6700Warning, industrial
White#ffffffClinical, minimal

Adding Flicker Animation

@keyframes neonFlicker {
  0%,19%,21%,23%,25%,54%,56%,100% { opacity: 1; }
  20%,24%,55% { opacity: 0.4; }
}
.neon-flicker {
  animation: neonFlicker 3s infinite;
}

Browser Support

PropertyChromeFirefoxSafariEdge
text-shadow2+3.5+1.1+12+
CSS animations43+16+9+12+

Frequently Asked Questions

Why does neon text look washed out on light backgrounds?

Neon effects only work on dark backgrounds. The glow is additive light — it blends into surrounding darkness. On a white background there's nothing to contrast against. Always use neon on backgrounds darker than #1a1a1a.

How many text-shadow layers do I need?

3–5 layers is the sweet spot. Fewer layers produce a flat glow; more than 6 rarely add visible quality and add render cost. Each layer should roughly double the blur radius of the previous.

Can I use neon on any font?

Yes, but thin or light-weight fonts show neon best — the glow has room to bleed around the strokes. Very bold or heavy fonts can look muddy because the glows merge. Try font-weight 300–600 for best results.

Is neon text accessible?

Check contrast between the text and background, not the glow. Bright white or light-colored neon text on black usually passes WCAG AA. Use the CSS Validator to check your code is valid.

Pair with our Text Shadow Generator for non-neon text effects, or Glassmorphism Generator for dark-UI card backgrounds.

Tool last updated: