Add Impressive Reflection Effects Using Only CSS

One of the most fascinating things to do with today's modern web technologies is creating image reflection. This can do doubt be done using Photoshop or other image editors, but using CSS can save the size of your image and let you animate the reflection if needed.

In this post, you'll be looking at some of the methods by which you can create beautiful reflections for your images and some CSS hacks to make them look real. So let's get started.

Using box-reflection property

Currently, the box-reflect property is supported by only Webkit. With this, you can make the reflection appear above, below, right or left of the object.

HTML

<img id="reflect" src="pic.jpg">

CSS

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

Giving the value below placed the mirror image below the actual image. You can also give the values above, right or left to place the reflection with respect to the original image at the desired position.

Wasn't that quite simple?

Just a single line of code to get the reflection of your image. Let's move forward to giving some gap between the real object and the reflected image.

Giving offset

Giving offset to the box-reflect property will add gap between the reflection and the actual element.

CSS

#reflect {
    -webkit-box-reflect: below 8px;
}

Giving an offset of 8px in the above code moved the reflection 8px below the actual image.

Similarly, if the reflection is on the right side of the object, then it will move 8px to the right, and the same will be applied for the other two positions of the reflection.

Adding gradient

Having added the reflection at the desired position, it's time to give it a natural look. Normally, a reflection is faded at the side away from the real object. You can give this effect to the reflection using CSS Gradients, as the one shown below.

CSS

#reflect {
    -webkit-box-reflect: below 8px -webkit-gradient(linear, right top, right bottom, from(transparent), to(rgba(255, 255, 255, 0.4)));
}

The above demo is giving the feel of the reflection of the football on a white ground. You can make the reflection look more natural by making only some portion of it visible by using color-stop in the linear gradient.

CSS

#reflect {
    -webkit-box-reflect: below 8px -webkit-gradient(linear, right top, right bottom, from(transparent), color-stop(40%, transparent), to(rgba(255, 255, 255, 0.1)));
}

The above reflection is made transparent from its bottom to 40% of the height from the bottom, so that the gradient change from transparent to rgba(255, 255, 255, 0.1) for its remaining area. Thus the reflection is shortened.

Even though this property is so much time saving and convenient to use, its effect can just be seen by the WebKit-based browsers (mainly Chrome and Safari).

For other browsers

For all the other browsers, there is another CSS hack to produce the same type of reflection.

For that, the idea will be to flip the object vertically (if you want top or bottom reflection) or horizontally (for right or left reflection) using the scale function of the transform property. This flipped object will be your reflection. Then place the flipped object at the desired position where you want the reflection with respect to the real object. If you are not aware of the transform property, then read this post.

Let's see how to add a bottom reflection for an object.

HTML

<img id="real" src="pic.jpg">
<img id="refl" src="pic.jpg">

CSS

#real {
	display: block;
}
#refl {
	display: block;
	-moz-transform: scale(1,-1);
       -o-transform: scale(1,-1);
       -webkit-transform: scale(1,-1);
       transform: scale(1,-1);
}

In the above CSS, I gave display: block to both the images so that these get displayed one below the other. Since the second image is to be made the reflection, I flipped it vertically by giving the second argument of the scale function -1.

You can also write the above code by directly using the scaleY function. Also, you can use to add some gap between the object and the reflection by using margin or padding property.

CSS

#real {
	display:block;
	margin-bottom: 8px;
}
#refl {
	display:block;
	-moz-transform: scaleY(-1);
       -o-transform: scaleY(-1);
       -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
}

Similarly, you can flip the object horizontally to produce a right or left reflection by giving -1 as the argument to the scaleX function.

CSS

#real {
	display:inline-block;
	margin-right:8px;
}
#refl {
	display:inline-block;
	-moz-transform: scaleX(-1);
       -o-transform: scaleX(-1);
       -webkit-transform: scaleX(-1);
       transform: scaleX(-1);
}

I gave here display: inline-block so that the two images are positioned side by side. Now, to add transparent gradient effect to the reflection, you can use the image-mask property.

CSS

#real {
	display:block;
	margin-bottom: 8px;
}
#refl {
	display:block;
	-moz-transform: scaleY(-1);
       -o-transform: scaleY(-1);
       -webkit-transform: scaleY(-1);
       transform: scaleY(-1);
	-webkit-mask-image: -webkit-gradient(linear, right top, right bottom, from(transparent), color-stop(40%, transparent), to(rgba(255, 255, 255, 0.1)));
}

Just a few lines of code and we get cool reflections with transparent gradients. Not just images, you can add reflections for other elements also. The following code adds a bottom shadow with gradient for some text.

HTML

<div id="para_div">
	<p id="real">My Text</p>
	<p id="refl">My Text</p>
</div>

CSS

#real {
	font-size: 40px;
	color: white;
	margin: 0;
}
#refl {
	font-size:40px;
	color: white;margin: 0;
	-moz-transform: scaleY(-1);
       -o-transform: scaleY(-1);
       -webkit-transform: scaleY(-1);
       transform: scaleY(-1);
	-webkit-mask-image: -webkit-gradient(linear, right top, right bottom, from(transparent), color-stop(20%, transparent), to(rgba(0, 0, 0, 0.4)));
}
#para_div {
	display:inline-block;
	background-color: black;
	padding: 20px 40px;
	border-radius:10px;
}

Browser Support

As stated in the post, the box-reflect property is supported just by Chrome, Safari and newer versions of Opera.

Talking about the second method, the transform property is supported by almost all the browsers except Opera Mini. The image-mask property is not supported by IE, Edge, Opera Mini and newer version of Firefox.

Conclusion

These were some super easy ways using which you can create reflections, mirror images, translucent shadows and much more out of your creativity. You can also make rotated reflections and at different angles to the original object and add different colored gradients.

You can also use the CSS property opacity which is supported by almost all the browsers in place of image-mask or filter: FlipH and filter: FlipV to flip the objects instead of using transform.