A gradient reveal text effect built with pure HTML and CSS that introduces text by gradually exposing a flowing gradient across the characters, creating a colorful reveal animation without relying on JavaScript or external libraries.
Usage
This component is ideal for situations where text should appear with visual energy, such as hero headings, brand slogans, promotional banners, or feature titles that benefit from a dynamic color based entrance.
Implementation
The reveal effect is achieved using CSS background gradients, background size animation, and text clipping techniques, allowing the gradient layer to move across the text while the underlying characters remain sharp and readable.
HTML
<span class="text-gradient-reveal">
Interactive Text
</span>CSS
.text-gradient-reveal {
display: inline-block;
font-size: 16px;
font-weight: 600;
color: #0051ff;
background: linear-gradient(90deg, #6366f1, #22d3ee);
background-size: 0% 100%;
background-repeat: no-repeat;
background-position: left bottom;
-webkit-background-clip: text;
background-clip: text;
transition: background-size 300ms ease;
}
.text-gradient-reveal:hover {
background-size: 100% 100%;
color: transparent;
}
@media (prefers-color-scheme: dark) {
.text-gradient-reveal {
color: #e5e7eb;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses animated gradient masking
- Adds color driven motion to typography
- Keeps text crisp during animation
- Designed for decorative headline use
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.