-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.

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

Syntax

css

/* 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: revert;
-webkit-box-reflect: revert-layer;
-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 definition

Initial value	`none`
Applies to	all elements
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

-webkit-box-reflect =
  [ above | below | right | left ]? <length>? <image>?

Specifications

Not part of any standard. The standard way to do reflection in CSS is to use the CSS element() function.

Browser compatibility

BCD tables only load in the browser