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.
CSS
/* Gradient Glow — generated with TEXT-FX
* 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 95% 64%), hsl(3 95% 60%), hsl(73 95% 64%), hsl(313 95% 64%));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
background-size: 220% 100%;
filter: drop-shadow(0 0 7.199999999999999px hsl(3 100% 60% / 0.55)) drop-shadow(0 0 19.200000000000003px hsl(3 100% 60% / 0.55));
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