Search code examples
htmlcssshadow

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?

Solution

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

    Demo http://jsbin.com/nidekeyajo/edit?html,css,js,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="https://lorempixel.com/800/450/nature/3/" alt="rocky shore">
  <img class="shadow" src="https://lorempixel.com/800/450/nature/3/" alt="">
</div>