Neon Glow

Neon & Glow · Animated · pure CSS

The classic neon tube: layered text-shadows build a bright core with a colored halo, plus an optional broken-sign flicker. Reads beautifully on dark backgrounds.

Open in the generator →All effects
Neon Glow

CSS

/* Neon Glow — generated with TEXT-FX
 * HTML: just put the class on any element.
 * Font: 'Syne', sans-serif (load from Google Fonts).
 */

.text-effect {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: none;
}

.text-effect {
  color: hsl(322 30% 97%);
  text-shadow:
    0 0 5px hsl(322 100% 60%),
    0 0 12px hsl(322 100% 60%),
    0 0 28px hsl(344 100% 55%),
    0 0 56px hsl(344 100% 55%);
}

Pure CSS — just add the .text-effect class to any element.

Category
Neon & Glow
Type
Animated
Browser support
All modern browsers
Capabilities
pure

Related Neon & Glow effects