← All elements
<div class="ct"><span>Reveal</span></div>About this animation
A bold word is hidden behind a solid curtain that wipes upward on hover to uncover gradient text.
How it works
Text is filled with a gradient using background-clip text. A solid pseudo-element curtain with a hint label covers it, and on hover it translates up by 101 percent so the gradient word is uncovered. overflow hidden clips the curtain.
Ways to customise it
- Change the gradient colours.
- Replace the hint text in content.
- Slide the curtain sideways with translateX.
Good to know
Hidden text is still in the DOM so screen readers read it, but sighted touch users may never see it without hover, so keep the hint accurate.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.