Suprabha Supi
Suprabha's Blog


Suprabha's Blog

CSS Box Reflect

CSS Box Reflect

Suprabha Supi's photo
Suprabha Supi
ยทJun 12, 2021ยท

1 min read

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


<img src="" />
img {
  -webkit-box-reflect: right;

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 ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป ๐ŸŒŸ Instagram
Share this