CSS Image Reflection

❮ Previous Next ❯

In this section, you'll discover how to create a mirror image of a picture.

CSS Image Reflections

The box-reflect property is employed to make an image look like it's reflected.

The box-reflect property can have one of these values: below, above, left, or right.

Examples

Example

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

Try it Yourself »

Example

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

Try it Yourself »

CSS Reflection Offset

To set the space between the image and its reflection, include the gap size in the box-reflect property.

Example

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

Try it Yourself »

CSS Reflection With Gradient

We can make the reflection gradually disappear with a fade-out effect.

Example

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

Try it Yourself »

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        -webkit-box-reflect: below;
      }
    </style>
  </head>
  <body>
    <h1>CSS Image Reflection</h1>
    <p>Show the reflection below the image:</p>
    <img src="/assets/files/trees (1) 2.png">
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        -webkit-box-reflect: right;
      }
    </style>
  </head>
  <body>
    <h1>CSS Image Reflection</h1>
    <p>Show the reflection to the right of the image:</p>
    <img src="/assets/files/trees (1) 2.png">
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        -webkit-box-reflect: below 20px;
      }
    </style>
  </head>
  <body>
    <h1>CSS Image Reflection</h1>
    <p>Display the reflection underneath the picture, shifted down by 20 pixels.</p>
    <img src="/assets/files/trees (1) 2.png">
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.4));
      }
    </style>
  </head>
  <body>
    <h1>CSS Image Reflection</h1>
    <p> The reflection is shown with a gradient to create a fading effect</p>
    <img src="/assets/files/trees (1) 2.png">
  </body>
</html>

❮ Previous Next ❯

CSS Basics

CSS Properties

CSS Responsive

CSS Grid

CSS Image Reflection