DEV Community

Cover image for HTML CSS Reflection Effect
CodingFlicks
CodingFlicks

Posted on

HTML CSS Reflection Effect

Today we will share with you a CSS Tricks snippet of the Realistic Image Reflection effect made with HTML CSS. Realistic Image Reflection or HTML CSS Mirror Effect is a web design and development trick that simulates the appearance of an image reflected on a surface. Much like a reflection, you might see in water or on a shiny floor. Those of you learning CSS will learn about a new property from this snippet. A video tutorial below shows how to create this snippet.

Many use 'transform' and 'gradient' to position and style the reflected image to create image reflection effects with HTML CSS. But here we will use a CSS property called 'webkit-box-reflect'. Please note that this CSS property is not supported by some browsers such as Firefox, Internet Explorer, and Opera Mini. Beginners experiment with various properties of CSS in the beginning with the purpose of learning.

You May Also Like:

This snippet is made for this purpose only. This kind of reflection effect makes a website's images very visually appealing. This technique can be used to create the illusion that the website images are sitting on a reflective surface. It's a creative use of CSS and this technique can be used to present a website's image more dynamically.

<!DOCTYPE html>
<!-- codingflicks.com -->
<html>
<head>
    <title>Realistic Image Reflection using CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="image">
          <img src="img/1.jpg" alt="">
        </div>
        <div class="image">
          <img src="img/2.jpg" alt="">
        </div>
        <div class="image">
          <img src="img/3.jpg" alt="">
        </div>
      </div>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode
body {
    background: #000;
}
.container {
    width: 80%;
    margin: 10% auto;
    display: flex;
    justify-content: space-between;
}
.image {
    width: 30%;
    height: 200px;
}
.image img {
    width: 100%;
    -webkit-box-reflect: below 4px linear-gradient(transparent 25%, rgba(0, 0, 0, 0.35));
}

Enter fullscreen mode Exit fullscreen mode

For the Original Post CLICK HERE

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more