Pulse Glow
Neon & Glow · Animated · pure CSS
A neon glow that gently breathes in and out via an animated text-shadow. Calm, sub-1Hz pulsing that draws the eye without being distracting.
How it works
Pulse 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
Pulse Glow exposes 2 dedicated controls — Hue 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
/* Pulse Glow — generated with TEXT-FX
* HTML: just put the class on any element.
* Font: 'Space Grotesk', sans-serif (load from Google Fonts).
*/
.text-effect {
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
letter-spacing: 0px;
text-transform: none;
}
.text-effect {
color: hsl(47 60% 92%);
text-shadow:
0 0 4px hsl(47 100% 60%),
0 0 10px hsl(47 100% 60%),
0 0 22px hsl(65 100% 55%),
0 0 40px hsl(65 100% 55%);
animation: text-effect-pulse 3.0s ease-in-out infinite;
}
@keyframes text-effect-pulse {
0%, 100% {
text-shadow:
0 0 4px hsl(47 100% 60%),
0 0 10px hsl(47 100% 60%),
0 0 22px hsl(65 100% 55%),
0 0 40px hsl(65 100% 55%);
}
50% {
text-shadow:
0 0 7px hsl(47 100% 60%),
0 0 18px hsl(47 100% 60%),
0 0 40px hsl(65 100% 55%),
0 0 72px hsl(65 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