Frosted glass card
A translucent, blurred card set over colourful shapes that slowly float behind it.
- Tailwind
- React
- CSS
- WordPress
Description
The card reveals, through frosted glass, three colourful shapes that gently drift and spin: the glassmorphism effect applied to an offer, a price or an announcement. A thin highlight runs along its top edge. The card background stays opaque enough to keep AA contrast in light and dark mode, and it stays readable in browsers without backdrop-filter. Pure CSS, no image; with prefers-reduced-motion the shapes stay 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