CSS box-reflect Property
Definition and Usage
The box-reflect
property is used to create a reflection of an element.
The value of the box-reflect
property can be: below
, above
, left
, or right
.
Note: The box-reflect
property is non-standard and must be written with -webkit-
prefix.
Default value: | none |
---|---|
Inherited: | no |
Animatable: | no. Read about animatable |
Version: | CSS3 |
JavaScript syntax: | object.style.webkitBoxReflect="below" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-
specify the first version that worked with a prefix.
Property | |||||
---|---|---|---|---|---|
box-reflect | 4.0 -webkit- | 79.0 -webkit- | Not supported | 4.0 -webkit- | 15.0 -webkit- |
CSS Syntax
box-reflect: none|below|above|left|right|position offset gradient|initial|inherit;
Property Values
Property Value | Description | Demo |
---|---|---|
none | Default value. No reflection is displayed. | Demo ❯ |
below | Creates a reflection below the element. | Demo ❯ |
above | Creates a reflection above the element. | Demo ❯ |
left | Creates a reflection to the left of the element. | Demo ❯ |
right | Creates a reflection to the right of the element. | Demo ❯ |
position offset | Two value syntax: - position sets reflection below, above, left, or right of the element. - offset sets the distance to the reflection. Distance is set in px, pt, cm, etc. Default value is 0. Read about length units |
Demo ❯ |
position offset gradient | Three value syntax: - position sets reflection below, above, left, or right of the element. - offset sets the distance to the reflection. Distance is set in px, pt, cm, etc. Default value is 0. Read about length units - gradient sets a transition for the reflection, i.e. a fading effect. |
Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
The box-reflect
property can be set on any visible HTML element. Here, reflection is made below a p-tag:
p {
-webkit-box-reflect: below;
}
Try it Yourself »
Example
The box-reflect
property value can be set with two-value syntax. Here, the reflection is below an img-element, but with 70px distance:
img {
-webkit-box-reflect: below 70px;
}
Try it Yourself »
Example
The box-reflect
property value can also be set with three-value syntax. Here, the reflection is below an img-element, with 10px distance, and gradually fading:
img {
-webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}
Try it Yourself »
Related Pages
CSS tutorial: CSS Image Reflection