Get my e-book focusing on CSS3 and
modern web UI development.
dig into web UI development
Last modified: 25. 2. 2016
The browser will render a reflection of the element under or next to it.
The syntax is based on the Webkit core:
-webkit-box-reflect: _reflection_direction _offset_ _mask_;
This is a required value with four possible choices:
This defines the distance of a reflection from the original object, using
standard CSS units –
em and others.
-webkit-box-reflect: below 5px;
A mask defines the reflection overlay effect. A CSS gradient is a commonly used tool for achieving the mirror effect: however, it can also be done using an image. The black area of a mask is visible, the transparent one is hidden.
-webkit-box-reflect: below 5px linear-gradient(to bottom, transparent, black);
Take a look at a live example at cdpn.io/e/CLEhF.
Box reflection is supported only by Webkit browsers. Nowdays, it works in all versions of Safari and even in Android Browser. It works even in Chrome which has its own Blink core. See caniuse.com/box-reflect
In Firefox, we can achieve a reflection effect by using the
This property is not reliable when dealing with a big target group, however, it might come in handy for internal apps with a limited target audience.