Skip to main content

Introduction to CSS Image Reflection

CSS Image Reflection​

CSS Image Reflection is a property that adds a mirror-like reflection underneath an image. It can be used to create a visually interesting effect on images and can add depth and dimension to your design.

As an example:

img {
  -webkit-box-reflect: below 0px linear-gradient(transparent, rgba(0, 0, 0, 0.2));
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
}

In this example:

  • We use the -webkit-box-reflect property to create the reflection.
  • The property takes two values: the first value (below) specifies the direction of the reflection, and the second value (0px) specifies the distance of the reflection from the image.
  • The linear-gradient function creates a gradient from transparent to a slightly opaque black color, which is used to fade the reflection out.

The -webkit-box-reflect Property​

-webkit-box-reflect is a CSS property that was introduced by Apple for use in WebKit-based browsers such as Safari and Google Chrome. It allows you to create a visual reflection effect on an element such as an image, video or text. The property is not part of the official CSS specification, and is therefore prefixed with "-webkit-" to indicate that it is a vendor-specific extension.

As an example:

img {
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
}

In this example:

  • We're applying the -webkit-box-reflect property to an img element.
  • The property takes two values: the first value (below) specifies the direction of the reflection, and the second value (0px) specifies the distance of the reflection from the element.
  • The linear-gradient function is used to create a gradient that fades the reflection from transparent at the top to semi-transparent white at the bottom.
  • By default, the reflection is clipped to the size of the element, but you can use the clip keyword to control the size and position of the reflection.
info

The -webkit-box-reflect property is specific to WebKit-based browsers and is not part of the official CSS specification