`-webkit-box-reflect` CSS property

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

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

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

See also

• The Apple documentation.
• The WebKit specification.