A gradient sweep hover effect built with pure HTML and CSS that animates a moving color gradient across an element during interaction. It enhances dynamic visual feedback while keeping the layout lightweight and responsive.
Usage
Use this component when UI elements require animated color emphasis, such as call-to-action buttons, cards, banners, or navigation links that benefit from eye catching hover transitions.
Implementation
The sweep animation is created using linear-gradient backgrounds and controlled transition positioning, often combined with pseudo elements for layered movement. CSS handles animation timing and ensures smooth performance across devices.
HTML
<div class="hover-sweep">
Interactive
</div>CSS
.hover-sweep {
width: 200px;
padding: 0.8rem;
border-radius: 16px;
background: #6366f1;
color: #ffffff;
text-align: center;
font-size: 13px;
position: relative;
overflow: hidden;
}
.hover-sweep::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.35),
transparent
);
transform: translateX(-100%);
transition: transform 300ms ease;
}
.hover-sweep:hover::after {
transform: translateX(100%);
}
@media (prefers-color-scheme: dark) {
.hover-sweep {
background: #818cf8;
color: #020617;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses animated gradient transitions
- Enhances visual interaction emphasis
- Fully responsive and lightweight
- Suitable for buttons, cards, and banners
- Easy to customize gradient colors and direction
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.