CSS property: -webkit-box-reflect


Defines a reflection of a border box.

Reflections will update automatically as the source changes. Specifying a reflection has the effect of creating a stacking context (like opacity, masks, and transforms). The reflection is non-interactive, and as such, it has no effect on hit testing. The reflection has no effect on layout, other than being part of a container’s overflow; it is similar to -webkit-box-shadow in this respect.


-webkit-box-reflect: <direction> <offset> <mask-box-image>;



The position of the reflection relative to the border box.

aboveThe reflection appears above the border box.
belowThe reflection appears below the border box.
leftThe reflection appears to the left of the border box.
rightThe reflection appears to the right of the border box.

The distance of the reflection from the edge of the border box, in length units or as a percentage.

0 (by default)The default value is 0

Used to overlay the reflection. If omitted, the reflection has no mask.