DEV Community

Cover image for CSS Box Reflect

Posted on


CSS Box Reflect

The `-webkit-box-reflect` CSS property lets you reflect the content of an element in one specific direction.

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

/* Direction values */
-webkit-box-reflect: above / below / left /  right;

/* can also add offset value */
-webkit-box-reflect: below 10px;

/* even add gradient */
-webkit-box-reflect: below 0 linear-gradient(transparent, white);
Enter fullscreen mode Exit fullscreen mode


<img src="" />
Enter fullscreen mode Exit fullscreen mode
img {
  -webkit-box-reflect: right;
Enter fullscreen mode Exit fullscreen mode

css box reflect

Checkout the codepen here:

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 support

Reference 🧐

Buy Me A Coffee

🌟 Twitter πŸ‘©πŸ»β€πŸ’» 🌟 Instagram

Top comments (1)

madrafj profile image
Ahmad Rafsanjani

It's news to me.. Thanks for sharing

Advice For Junior Developers

Advice from a career of 15+ years for new and beginner developers just getting started on their journey.