CSS Image Reflection
CSS can mirror an image below itself, fading to transparent — a classic "shiny floor" effect. It's done with the -webkit-box-reflect property, plus a gradient mask.
The one-liner
CSS
img.reflected {
-webkit-box-reflect: below 4px
linear-gradient(transparent, rgb(0 0 0 / 0.4));
}
Directions
| Direction | Where the reflection appears |
|---|---|
below | Underneath. Most common. |
above | On top, flipped. |
left | To the left. |
right | To the right. |
Cross-browser alternative
-webkit-box-reflect isn't standard CSS — Firefox doesn't support it. For wider support, duplicate the image:
CSS
.mirror {
display: flex; flex-direction: column;
}
.mirror img.original { display: block; }
.mirror img.echo {
transform: scaleY(-1);
mask-image: linear-gradient(transparent, black);
opacity: 0.6;
}
Tip: Reflection effects look great in product mockups and hero sections. Skip them in body copy — heavy decoration there hurts readability.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Image Reflection</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Create a reflection below this image, fading out.
img { -webkit-box-reflect:
4px linear-gradient(transparent, rgb(0 0 0 / 0.4)); }
The direction is one word.
Discussion
Loading…