Color-Cycle Glow
Neon & Glow · Animated · pure CSS
A neon tube whose hue travels the full color wheel forever, driven by a salted @property number the browser interpolates every frame. The letter fill and its halo both read the same live hue, so the glow morphs cyan to magenta to amber in one continuous, GPU-smooth loop.
How it works
Color-Cycle Glow is an animated neon & glow text effect rendered entirely in CSS. It animates a registered CSS @property, which keeps the motion smooth and GPU-friendly.
Controls
Color-Cycle Glow exposes 4 dedicated controls — Start Hue, Speed, Glow and Saturation — 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
/* Color-Cycle Glow — made with TEXT-FX · https://text-fx.app
* HTML: just put the class on any element.
* Font: 'Unbounded', sans-serif (load from Google Fonts).
*/
@property --text-effect-hue {
syntax: "<number>";
inherits: false;
initial-value: 342;
}
.text-effect {
font-family: 'Unbounded', sans-serif;
font-weight: 700;
letter-spacing: -2px;
text-transform: none;
}
.text-effect {
--text-effect-hue: 342;
color: hsl(var(--text-effect-hue) 66% 80%);
text-shadow:
0 0 5.1px hsl(var(--text-effect-hue) 66% 68%),
0 0 12.8px hsl(var(--text-effect-hue) 66% 68%),
0 0 28.2px hsl(calc(var(--text-effect-hue) + 24) 66% 55%),
0 0 51.2px hsl(calc(var(--text-effect-hue) + 24) 66% 55%);
animation: text-effect-cycle 11.9s linear infinite;
}
@keyframes text-effect-cycle {
0% { --text-effect-hue: 342; }
100% { --text-effect-hue: 702; }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Neon & Glow
- Type
- Animated
- Browser support
- Animated @property hue-cycle (Chrome 85+, Safari 16.4+, Firefox 128+)
- Capabilities
- pure, property