CSS Image Reflection

You will learn how to reflect a picture in this chapter.

CSS Image Reflections

An image reflection can be produced by using the box-reflect property.

The box-reflect attribute has four possible values: left, right, above, and below.

The initial version of the browser that fully supports the attribute is indicated by the numbers in the table.

The version that supported a prefix the first time is indicated by numbers that come after

Here we want the reflection below the image:

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

Here we want the reflection to the right of the image:

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

Add the gap’s size to the box-reflect property to define the distance between the picture and the reflection.

Here we want the reflection below the image, with a 20px offset:

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

We may also give the reflection a fade-out effect.

Create a fade-out effect on the reflection:

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