Sergio Estrada Sergio Estrada - 8 days ago 5
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

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

Demo http://jsbin.com/cecohu/edit?html,css,output

* {
  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="http://lorempixel.com/800/450/nature/3/" alt="rocky shore">
  <img class="shadow" src="http://lorempixel.com/800/450/nature/3/" alt="">
</div>