Sergio Estrada Sergio Estrada - 1 year ago 98
CSS Question

Can images be reflected as a shadow using css?

I've been seeing a lot of designs with this style :

Image Reflection Shadows

Sample of image showing reflection:

Cropped to pertinent part of image
I'm just wondering if this is even possible to code. I've been searching for a way to do this but found no luck. I just want some clearance on this. Is it just for looks or is it possible?

Answer Source

Yes! You can do this with CSS and filter: blur();


* {
  box-sizing: border-box;
  margin: 0;

img {
  height: auto;
  max-width: 100%;

.wrap {
  margin: 0 auto;
  max-width: 400px;
  position: relative;

.image {
  display: block;
  position: relative;
  z-index: 2;

.shadow {
  bottom: -30px;
  filter: blur(20px);/* this is the magic part */
  height: 100%;
  left: 0;
  position: absolute;
  transform: scale(0.95);
  width: 100%;
  z-index: 1;
<div class="wrap">
  <img class="image" src="" alt="rocky shore">
  <img class="shadow" src="" alt="">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download