Gradient Underline
Underline & Decoration · Animated · pure CSS
A full-width underline bar whose gradient hue cycles continuously via an animated @property. A flowing, colorful heading underline.
How it works
Gradient Underline is an animated underline & decoration text effect rendered entirely in CSS. It animates a registered CSS @property, which keeps the motion smooth and GPU-friendly.
Controls
Gradient Underline exposes 3 dedicated controls — Thickness, Gap 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 Underline — generated with TEXT-FX
* HTML: just put the class on any element.
* Font: 'Bungee', cursive (load from Google Fonts).
*/
@property --text-effect-hue {
syntax: "<number>";
inherits: false;
initial-value: 210;
}
.text-effect {
font-family: 'Bungee', cursive;
font-weight: 900;
letter-spacing: 8px;
text-transform: none;
}
.text-effect {
--text-effect-hue: 210;
color: hsl(0 0% 94%);
display: inline-block;
padding-bottom: 5px;
background-image: linear-gradient(90deg, hsl(var(--text-effect-hue) 50% 56%), hsl(calc(var(--text-effect-hue) + 12) 50% 54%), hsl(calc(var(--text-effect-hue) + 24) 50% 56%), hsl(calc(var(--text-effect-hue) + 36) 50% 54%));
background-repeat: no-repeat;
background-size: 100% 8px;
background-position: 0 100%;
animation: text-effect-huecycle 10.5s linear infinite;
}
@keyframes text-effect-huecycle {
to { --text-effect-hue: 210; }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Underline & Decoration
- Type
- Animated
- Browser support
- Animated @property <number> driving a gradient underline bar
- Capabilities
- property