Image reflection with CSS(3) 🤘

Hi 👋,

Some time ago I came across a really cool feature from CSS3 that (to be honest) is not too much useful but still very handy if you're pursuing a special "look" to an image gallery on your website.

The image reflection! 👀

I was used to seeing people creating such effects with photo editors, applying the reflection to the image, and using that image on the website. But, this CSS3 feature brings us to the next level.

It creates an opportunity for your (website) users to quickly upload images thru your CMS and get those images automatically set with a (super cool) reflection effect!

But, don't get too excited with that and use with caution, after all, this feature is (yet) not standard and not supported by some browsers!

You can check the support HERE.

Right! Then, let's see the code:

img {
   -webkit-box-reflect: below;
}

This creates the basic reflection below your image. Pretty simple, isn't it?

Now, let's be honest! A reflection without a (little) gap and a gradient mask won't feel a real reflection, isn't it?

Then, check the next code:

img {
  -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1)));
}

This code will create a gradient-masked reflection below your image with a 10px gap with about 30% of the image visible in the reflection.

To adjust the length of your reflection, you need to use the color-stop to control the transition.