-webkit-box-reflect

Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.

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.
: Indicates the size of the reflection.
: 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 ]? ? ?  

 = 
         |
    

 = 
    |
    

 = 
  url(  * )  |
                        

 = 
  src(  * )

Specifications

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