Gradient Glow
Gradient Fill · Animated · pure CSS
A flowing multi-stop gradient clipped to the text and lit from behind by a matching drop-shadow bloom. A gradient headline that radiates.
How it works
Gradient Glow is an animated gradient fill text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
Gradient Glow exposes 3 dedicated controls — Hue, Glow 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
/* Gradient Glow — made with TEXT-FX · https://text-fx.app
* HTML: just put the class on any element.
* Font: 'Bungee', cursive (load from Google Fonts).
*/
.text-effect {
font-family: 'Bungee', cursive;
font-weight: 900;
letter-spacing: -2px;
text-transform: none;
}
.text-effect {
background: linear-gradient(90deg, hsl(313 55% 64%), hsl(333 55% 60%), hsl(358 55% 64%), hsl(313 55% 64%));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
background-size: 220% 100%;
filter: drop-shadow(0 0 3.2px hsl(333 55% 60% / 0.28)) drop-shadow(0 0 8px hsl(333 55% 60% / 0.28));
animation: text-effect-glowflow 6.0s linear infinite;
}
@keyframes text-effect-glowflow {
0% { background-position: 0% 50%; }
100% { background-position: 220% 50%; }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Gradient Fill
- Type
- Animated
- Browser support
- background-clip:text + drop-shadow glow
- Capabilities
- pure