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.
How it works
Neon Glow is an animated neon & glow text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
Neon Glow exposes 3 dedicated controls — Hue, Flicker and Speed — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.
CSS
/* Neon Glow — made with TEXT-FX · https://text-fx.app
* 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(252 30% 97%);
text-shadow:
0 0 5px hsl(252 55% 60%),
0 0 12px hsl(252 55% 60%),
0 0 18px hsl(274 55% 55%),
0 0 32px hsl(274 55% 55%);
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Neon & Glow
- Type
- Animated
- Browser support
- All modern browsers
- Capabilities
- pure