Mesh gradient background
A hero set on a pastel mesh gradient whose colour patches slowly glide.
- Tailwind
- React
- CSS
- WordPress
Description
Four pastel radial gradients blend into a soft mesh gradient, and their positions glide endlessly so the background breathes behind the heading. A calming backdrop for a practice, a wellness brand or a home page. Only the background position is animated: nothing moves in the layout, no script or image. AA contrast in light and dark mode (deep colours at night). 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