DEV Community

loading...
Cover image for CSS image reflections with box-reflect

CSS image reflections with box-reflect

dailydevtips1 profile image Chris Bongers Originally published at daily-dev-tips.com ・1 min read

Did you know CSS has a custom reflection property?
It's a pretty cool addition to reflect an image to a specific side.

We can create these reflections using the box-reflect property.

Curious to see what the reflection can look like, check out this Codepen using box-reflect.

Reflecting image using CSS

For our example, we are using a super simple markup using just one image.

<img src="myimage.png" />
Enter fullscreen mode Exit fullscreen mode

Then we can use the box-reflect class to enable our reflection:

img {
  -webkit-box-reflect: below;
}
Enter fullscreen mode Exit fullscreen mode

This will give us the following result:

CSS Box-reflect below

We can use the following options:

  • below
  • above
  • left
  • right

And even place a offset:

img {
  -webkit-box-reflect: right 20px;
}
Enter fullscreen mode Exit fullscreen mode

Box-reflect offset right

And even cooler, we can add a gradient as the fade-out effect using the third parameter.

img {
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}
Enter fullscreen mode Exit fullscreen mode

Browser support

Box-reflect doesn't have the best support, but it's upcoming. So far, Firefox and IE have no support at all.

CSS Box-reflect browser support

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Discussion (6)

pic
Editor guide
Collapse
roelroel profile image
Roel de Brouwer

Is IE support still a thing? What year is it?

Collapse
dailydevtips1 profile image
Chris Bongers Author

Lol for some people it still is yeah, however, the Firefox one makes it a bit sad.

Collapse
bracikaa profile image
Mehmed Duhovic

Wow, you learn something new every day! I didn't even know about the reflection property.

Collapse
dailydevtips1 profile image
Chris Bongers Author

Awesome, glad you learned something new, never stop learning

Collapse
crisarji profile image
crisarji

Love this kind of posts, straight to the point with a clear and brief explanation.

Collapse
dailydevtips1 profile image
Chris Bongers Author

Thanks, glad you like the article 👍