index.md

---

title: "-webkit-box-reflect"
slug: Web/CSS/-webkit-box-reflect
page-type: css-property
status:
  - non-standard
browser-compat: css.properties.-webkit-box-reflect

---

{{CSSRef}}{{Non-standard_Header}}

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

/* 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;

Syntax

Values

• above, below, right, left

  • : Are keywords indicating in which direction the reflection is to happen.

• {{CSSxRef("<length>")}}

  • : Indicates the size of the reflection.

• {{CSSxRef("<image>")}}

  • : Describes the mask to be applied to the reflection.

Formal definition

{{CSSInfo}}

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 {{CSSxRef("element", "element()")}} function.

Browser compatibility

{{Compat}}

See also

• The Apple documentation.

• The Webkit specification.

• Lea Verou's article on reflection using CSS features on the standard track.