Scroll Gradient Reveal
Gradient Fill · Animated · pure CSS
A dim monochrome ghost of your text that a vivid multi-stop gradient wipes into as you scroll, clipped to the glyphs and flooding in from the reveal edge until it completes near viewport centre, then holds full. The wipe direction, where it finishes and the width of the hue sweep are all tunable — and it renders as the finished gradient wherever scroll-driven animation isn't supported.
How it works
Scroll Gradient Reveal is an animated gradient fill text effect rendered entirely in CSS. It is driven by a scroll-linked animation timeline.
Controls
Scroll Gradient Reveal exposes 4 dedicated controls — Hue, Hue Span, Wipe and Reveal End — 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
/* Scroll Gradient Reveal — made with TEXT-FX · https://text-fx.app
* HTML: uses scroll-driven animation.
* Font: 'Unbounded', sans-serif (load from Google Fonts).
*/
.text-effect {
font-family: 'Unbounded', sans-serif;
font-weight: 900;
letter-spacing: -2px;
text-transform: none;
}
.text-effect {
display: inline-grid;
}
.text-effect > span {
grid-area: 1 / 1;
}
.text-effect .fx-ghost {
color: hsl(321 10% 60%);
}
.text-effect .fx-vivid {
background: linear-gradient(135deg, hsl(321 88% 60%), hsl(352 88% 65%), hsl(23 88% 69%), hsl(53 88% 65%), hsl(84 88% 60%));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
@supports (animation-timeline: view()) {
.text-effect .fx-vivid {
-webkit-mask-image: linear-gradient(135deg, #000 42%, transparent 58%);
mask-image: linear-gradient(135deg, #000 42%, transparent 58%);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 250% 250%;
mask-size: 250% 250%;
animation: text-effect-reveal linear both;
animation-timeline: view();
animation-range: cover 0% cover 62%;
}
}
@keyframes text-effect-reveal {
0% { -webkit-mask-position: 100% 100%; mask-position: 100% 100%; filter: hue-rotate(15deg); }
100% { -webkit-mask-position: 0% 0%; mask-position: 0% 0%; filter: hue-rotate(0deg); }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Gradient Fill
- Type
- Animated
- Browser support
- Scroll-scrubbed in Chromium & Safari; static elsewhere
- Capabilities
- pure, scroll