You can create a mirror reflection effect in CSS.
With one property.
No pseudo-elements. No duplicated images. No gradients hacks.
img {
-webkit-box-reflect: below -5px linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}Here’s what’s happening:
-webkit-box-reflect does 3 things:
- below: puts the reflection under the element (you can also use above, left, right)
- -5px: the gap between the image and its reflection
- linear-gradient(…): fades the reflection out nicely
It looks great for:
- product shots
- hero images
- galleries
- “glass” / glossy UI vibes
⚠️ Small catch: it’s a WebKit-only feature. Works in Safari (and usually Chromium), but not Firefox.
Still, it’s a fun trick when you can use progressive enhancement.
To learn more tips about CSS, make sure to join my newsletter below ❤️