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