Animated aurora background
A hero section set on blurred colour glows that slowly drift, like the northern lights.
- Tailwind
- React
- CSS
- WordPress
Description
Three blurred, overlapping pastel glows move endlessly behind the heading, each at its own speed so the motion never repeats exactly. Pure CSS: no script, no image, a few bytes to load. Text keeps AA contrast over the background in both themes; in dark mode the glows turn deep and saturated. With prefers-reduced-motion the glows stay still and the result looks just as good.
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