Glowing border card
A card whose outline is travelled by an endless violet and cyan streak of light.
- Tailwind
- React
- CSS
- WordPress
Description
A conic gradient spins behind the card and only shows through its outline: a streak of light keeps travelling around the border, ideal to highlight an offer, a plan or a flagship product. Pure CSS, no image or script, and the card keeps ordinary content (heading, text, price, link). With prefers-reduced-motion the streak stops and one side of the border stays coloured.
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