DEV Community

Cover image for CSS Box Reflect
Suprabha
Suprabha

Posted on

CSS Box Reflect

#beginners #webdev #css #tutorial

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

Example 

<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/i/2fea277d-540b-42af-b152-782940dc49ef/de4cpd0-caed317f-b05d-4852-acb8-3ce25b38d873.png" />
Enter fullscreen mode Exit fullscreen mode 
img { -webkit-box-reflect: right; }
Enter fullscreen mode Exit fullscreen mode

Output:
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 👩🏻‍💻 suprabha.me 🌟 Instagram

Top comments (1)

Collapse
 
madrafj profile image
Ahmad Rafsanjani •

It's news to me.. Thanks for sharing