CSS Image Reflection

The CSS reflect property allows you to create a reflection effect on an image. It is a little-known property that can add a nice visual effect to your website or web application.

CSS Image Reflection is a property that allows you to create a mirror-like reflection effect below an image. It can be used to create a visual effect that makes it appear as though the image is reflecting on a surface.

To create a reflection effect, you can use the reflect value of the box-reflect property. Here's the syntax:

img {
 -webkit-box-reflect: below [distance] [fade];
 box-reflect: below [distance] [fade];
}

• The -webkit-box-reflect property is used for Safari and Chrome browsers.
• The box-reflect property is used for other modern browsers.

The below value indicates that the reflection should be below the image. The distance value specifies the distance between the image and its reflection, and the fade value specifies the gradient fade-out of the reflection.

Here's an example of how to create a reflection effect on an image:

/* html code */

<img src="example.jpg" alt="example image" />

/* css code */

img {
 -webkit-box-reflect: below 0px  // set the distance to 0px
                        20px;     // set the gradient fade-out to 20px
 box-reflect: below 0px 20px;    // set the reflection
}

In this example, the reflection is created below the image, with a distance of 0px and a fade-out gradient of 20px. You can adjust the distance and fade values to create different reflection effects.