Image reflection with CSS(3) 🤘

#css #image #design #website

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)));
}