CSS box-reflect property

Definition and Usage

box-reflect The attribute is used to create a reflection effect for elements.

box-reflect The value of the attribute can be:

  • below(Bottom)
  • above(Top)
  • left(Left)
  • right(Right)

Note:box-reflect The attribute is a non-standard attribute and must be used -webkit- Prefix.

Example

Example 1

Add a reflection effect below the image:

img {
  -webkit-box-reflect: below;
}

Try it yourself

Example 2

box-reflect The property can be applied to any visible HTML element. The following example creates a reflection effect below the <p> tag:

p {
  -webkit-box-reflect: below;
}

Try it yourself

Example 3

box-reflect The property can also be used with two-value syntax. The following example creates a reflection effect below the image and sets a distance of 70px:

img {
  -webkit-box-reflect: below 70px;
}

Try it yourself

Example 4

box-reflect The property can also be used with three-value syntax. The following example creates a reflection effect below the image, sets a distance of 10px, and fades out gradually:

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

CSS syntax

box-reflect: none|below|above|left|right|position offset gradient|initial|inherit;

Property value

Value Description
none Default value. No reflection effect is displayed.
below Creates a reflection effect on the bottom side of the element.
above Creates a reflection effect on the top side of the element.
left Creates a reflection effect on the left side of the element.
right Creates a reflection effect on the right side of the element.
position offset

Two-value syntax:

  • position Sets the position of the reflection (below, above, left, or right).
  • offset Sets the distance of the reflection. The distance can be in units such as px, pt, cm, etc. The default value is 0.
position offset gradient

Three-value syntax:

  • position Sets the position of the reflection (below, above, left, or right).
  • offset Sets the distance of the reflection. The distance can be in units such as px, pt, cm, etc. The default value is 0.
  • gradient Sets the transition effect of the reflection, such as fade-out effect.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical details

Default value: none
Inheritance: No
Animation creation: Not supported. See:Animation-related properties.
Version: CSS3
JavaScript syntax: object.style.webkitBoxReflect="below"

Browser support

Numbers in the table indicate the first browser version to fully support this property.

Numbers with the -webkit- prefix indicate the first version to support this prefix.

Chrome Edge Firefox Safari Opera
4.0 -webkit- 79.0 -webkit- Not supported 4.0 -webkit- 15.0 -webkit-