Prev Next

CSS Image Reflection

CSS Image Reflection allows you to create a mirror-like reflection of an image, enhancing visual design. The -webkit-box-reflect property is used for this effect.

Key Topics

Basic Reflection

A basic image reflection can be achieved using the -webkit-box-reflect property. This property reflects the image vertically.

<style>
        .basic-reflection {
            width: 200px;
            -webkit-box-reflect: below 0;
        }
</style>
<img src="example.jpg" alt="Example" class="basic-reflection">

Explanation: The image is reflected directly below itself, creating a basic mirror effect.

Reflection with Spacing

Add spacing between the image and its reflection using the -webkit-box-reflect property with a pixel value.

<style>
        .reflection-spacing {
            width: 200px;
            -webkit-box-reflect: below 10px;
        }
</style>
<img src="example.jpg" alt="Example" class="reflection-spacing">

Explanation: The reflection is separated from the image by 10 pixels, making the design more spacious.

Gradient Reflection

Use a gradient mask with -webkit-box-reflect to fade the reflection for a realistic effect.

<style>
        .gradient-reflection {
            width: 200px;
            -webkit-box-reflect: below 10px linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5));
        }
</style>
<img src="example.jpg" alt="Example" class="gradient-reflection">

Explanation: The reflection fades out towards the bottom using a gradient mask, creating a more polished and realistic look.

Key Takeaways

  • Basic Reflection: Use -webkit-box-reflect to mirror images.
  • Spacing: Add spacing to create separation between the image and its reflection.
  • Gradient Effects: Apply gradient masks for more realistic and visually appealing reflections.
  • Browser Support: This property works in WebKit-based browsers like Chrome and Safari.
Prev Next