-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.
<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>?
<image> =
<url> |
<gradient>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
Specifications
Not part of any standard. The standard way to do reflection in CSS is to use the CSS element() function.
Browser compatibility
Loading…
See also
- The Apple documentation.
- The WebKit specification.