ContextQMD
Back to Content

-webkit-box-reflect

files/en-us/web/css/reference/properties/-webkit-box-reflect/index.md

latest1.5 KB
Original Source

{{Non-standard_Header}}

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.
  • {{CSSxRef("<length>")}}
    • : Indicates the size of the reflection.
  • {{cssxref("image")}}
    • : Describes the mask to be applied to the reflection.

Formal definition

{{CSSInfo}}

Formal syntax

{{CSSSyntaxRaw(-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()")}} function.

Browser compatibility

{{Compat}}

See also