-webkit-box-reflect

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Summary

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

Note: This feature is not intended to be used by Web sites. To achieve reflection on the Web, the standard way is to use the CSS element() function.

Initial value	`none`
Applies to	all elements
Inherited	no
Media	visual
Computed value	as specified
Animatable	no
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

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

/* Offset value */
-webkit-box-reflect: below 10px;

/* Mask value */
-webkit-box-reflect: below 0 linear-gradient(transparent, white);

/* Global values */
-webkit-box-reflect: inherit;
-webkit-box-reflect: initial;
-webkit-box-reflect: unset;

Values

above, below, right, left: Are keywords indicating in which direction the reflection is to happen.
<length>: Indicates the size of the reflection.
<image>: Describes the mask to be applied to the reflection.

Formal syntax

[ above | below | right | left ]? <length>? <image>?

Specifications

This property is not on the standard track and will not be part of CSS. The standard way to do reflection in CSS is to use the CSS element() function.

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Basic support	Not supported	4.0	Not supported	15.0	4.0

Feature	Firefox Mobile (Gecko)	Android	IE Phone	Opera Mobile	Safari Mobile
Basic support	Not supported	2.1	Not supported	22.0 (Yes)	3.2 (Yes)