An animated gradient text effect built with pure HTML and CSS that continuously transitions multiple colors across the text surface, creating a lively and modern appearance without relying on JavaScript or external libraries.
Usage
This component is ideal for situations where text should feel dynamic rather than static, such as hero banners, marketing headlines, loading messages, brand slogans, or feature highlights that benefit from constant visual motion.
Implementation
The animation is created using CSS gradient backgrounds combined with background size expansion and background position keyframes, allowing the color spectrum to travel across the characters while preserving crisp typography and layout stability.
HTML
<h1 class="ss-gradient">Animated Gradient</h1>CSS
.ss-gradient{
font-size:28px;
font-weight:700;
background:linear-gradient(270deg,#22c55e,#3b82f6,#a855f7);
background-size:600% 600%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:gradientMove 6s ease infinite;
}
@keyframes gradientMove{
0%{ background-position:0% 50%; }
50%{ background-position:100% 50%; }
100%{ background-position:0% 50%; }
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses continuous gradient color movement
- Adds motion without shifting layout position
- Keeps letter edges sharp during animation
- Designed for eye catching headline text
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.