CSS Tutorial

CSS Image Reflection

Last modified on: October 31, 2024

<h3>CSS Image Reflection Effect</h3>
<p>Creating an image reflection effect can add an appealing visual to your site. While CSS doesn&rsquo;t directly support reflections, you can simulate one using <strong>CSS transforms</strong> and <strong>opacity</strong> settings.</p>
<p>Here's how to create an image reflection using CSS:</p>
<hr />
<h3>1. Basic Reflection Using Transform and Opacity</h3>
<p>One way to create a reflection is by duplicating the image, flipping it vertically, and adjusting the opacity.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="reflection-container"&gt;
    &lt;img src="image.jpg" alt="Original Image" class="original"&gt;
    &lt;img src="image.jpg" alt="Reflection Image" class="reflection"&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>CSS:</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.reflection-container {
    position: relative;
    display: inline-block;
}

.original {
    display: block;
}

.reflection {
    display: block;
    transform: scaleY(-1); /* Flip vertically */
    opacity: 0.5; /* Adjust transparency for reflection effect */
    filter: blur(2px); /* Optional: Slight blur for realistic effect */
    position: absolute;
    top: 100%; /* Position reflection below the original */
    left: 0;
    width: 100%;
}
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>2. Using CSS <code>mask-image</code> and Gradient for Smooth Reflection</h3>
<p>This method applies a gradient to the reflection to create a fading effect.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.reflection-container {
    position: relative;
    display: inline-block;
}

.original {
    display: block;
}

.reflection {
    transform: scaleY(-1);
    opacity: 0.5;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent); /* Support for WebKit */
}
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>3. Reflection Using CSS <code>::after</code> Pseudo-Element</h3>
<p>This method creates the reflection by applying styles to a pseudo-element.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="reflection-effect"&gt;
    &lt;img src="image.jpg" alt="Image with Reflection"&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>CSS:</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.reflection-effect {
    position: relative;
}

.reflection-effect::after {
    content: "";
    display: block;
    background-image: url('image.jpg'); /* Replace with the image */
    transform: scaleY(-1);
    opacity: 0.5;
    position: absolute;
    top: 100%; /* Position below the original image */
    left: 0;
    width: 100%;
    height: 100%;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
}
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Conclusion</h3>
<p>Using CSS, you can add realistic image reflections that enhance visuals on your site. These techniques help you create reflections without additional images or complex code. Experiment to achieve the reflection style that best fits your design</p>

Web Technology View More