CSS Image Reflection

CSS image reflection is a visual effect that creates a mirrored reflection of an image, typically below the original image. This effect mimics the appearance of the image being reflected onto a reflective surface, such as water or glass.

CSS provides the reflect property to achieve this effect, but it's not widely supported and is considered deprecated. Instead, CSS filters can be used to achieve similar effects more reliably.

Here's an example of how you could create a reflection effect using CSS filters:

Example

    img { 
            width: 400px; 
            height: 300px; 
            -webkit-box-reflect: right 10px; 
        } 
  
        .box { 
            display: flex; 
            flex-direction: column; 
        } 
        <body>
          <div class="box">
             <img src="images owl.png">
          </div>
        </body>

Output

CSS Reflection With Gradient

We can also create a fade-out effect on the reflection.

Example

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

You can click on above box to edit the code and run again.