An axial flow gradient text effect built with pure HTML and CSS that animates a gradient along a single horizontal or vertical axis, creating the impression of color flowing through the characters without relying on JavaScript or external libraries.
Usage
This component is ideal for interfaces where color motion should feel directional and continuous, such as hero headlines, tech style banners, loading-style titles, or accent text that benefits from a smooth linear color movement rather than static gradients.
Implementation
The flowing effect is achieved using CSS background position animation combined with gradient backgrounds and text clipping, allowing the gradient to travel steadily across the text while keeping the letterforms sharp and readable.
HTML
<span class="text-axial">
Axial Flow
</span>CSS
.text-axial {
font-size: 18px;
font-weight: 700;
background: linear-gradient(
90deg,
#6366f1,
#22d3ee,
#6366f1
);
background-size: 200% 100%;
background-position: 0% 50%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
transition: background-position 250ms ease;
}
.text-axial:hover {
background-position: 100% 50%;
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses single axis gradient motion
- Creates a sense of continuous color flow
- Keeps text edges crisp during animation
- Designed for dynamic headline styling
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.