Halation
Neon & Glow · Static · pure CSS
The warm photographic bloom film type picks up — a soft red-orange halation fringe haloing the letters from layered text-shadows. Cinematic, not neon, and stays still.
How it works
Halation is a static 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
Halation exposes 3 dedicated controls — Hue, Bloom and Intensity — 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
/* Halation — 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: 900;
letter-spacing: 0px;
text-transform: none;
}
.text-effect {
color: hsl(15 45% 92%);
text-shadow:
0 0 6.3px hsl(21 95% 66% / 0.74),
0 0 16.2px hsl(9 92% 58% / 0.59),
0 0 32.4px hsl(27 95% 60% / 0.33),
0 0 54px hsl(27 95% 60% / 0.33);
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Neon & Glow
- Type
- Static
- Browser support
- All modern browsers
- Capabilities
- pure