Animated gradient text
A heading whose highlighted words are filled with a continuously sliding colour gradient.
- Tailwind
- React
- CSS
- WordPress
Description
The highlighted words are filled with a violet, raspberry and blue gradient that slowly slides through the letters while the text stays still. The heading remains real, selectable text read normally by screen readers. The hues keep AA contrast in light and dark mode, and a solid colour takes over in browsers without background-clip: text. With prefers-reduced-motion the gradient stays still.
Code
Loading the code…
In the same spirit
A large heading in hollow letters where each word fills with colour from left to right, one after another.
- Tailwind
- React
- CSS
- WordPress
A product card crossed at the corner by a discount ribbon over which a glint of light sweeps.
- Tailwind
- React
- CSS
- WordPress
An integrations pitch where seven icons slowly circle a logo on two orbits.
- Tailwind
- React
- CSS
- WordPress
An offer card topped with a deck of colour swatches that fans out on hover or keyboard focus.
- Tailwind
- React
- CSS
- WordPress