CSS Image Reflection

CSS Image Reflections

The box-reflect property is used to create an image reflection.

The value of the box-reflect property can be: below, above, left , or right.

For example, reflection below the image:

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

ora a reflection to the right of the image:

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

To specify the gap between the image and the reflection, add the size of the gap to the box-reflect property.

For example, a reflection below the image with a 20px offset:

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

We can also 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));  
}