CSS3 Image Reflection [CSS3 Tips]

This article is part of our “HTML5/CSS3 Tutorials series" – dedicated to help make you a better designer and/or developer. Click here to see more articles from the same series.

So far, we have discussed a lot of new properties in CSS3. Beyond that, there are actually a few other properties that are currently not included in CSS3 official specifications that are worth to try out, one of which is the box-reflect property that is initiated by Webkit. This property can reflect on the objects specified.

Basic Reflection

The basic implementation is quite intuitive; let’s say, we want the reflection below the real object. We can write:


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

(Image source: Eight Weeks Of Bruce)

This example shows how we reflect an image below (the position) the object. But, in this case, we can also hold the reflection to the right, left, and above.

Reflection Offset

Offset is used to define the gap between the reflection and the real object reflected. Let’s see the code snippet below;


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

In the above code, we seperated the reflection from the real object by 10px;

(Image source: Eight Weeks Of Bruce)

View Demo

Masking with Gradients

The reflection effect that we commonly see is the fade-out at the bottom and displaying only half or less of the real object. To replicate this kind of effect, we can apply CSS3 Gradients to mask the object, like so;


-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));

This code will result in the following presentation;

(Image source: What’s Liberal About The Liberal Arts?)

We can also use color-stop to control transitions and make the reflection look nicer:


img {
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1)));
}

(Image source: Everything Matters!)

View Demo

Alternatives for Firefox

This property, however, is only working in Webkit browsers (meaning Safari and Chrome) at the moment. To deliver the same effect in Firefox, you need another route: using -moz-element() function. This function essentially will generate or replicate the content from specific HTML elements. Let’s take a look at the following example;

We have an image wrapped in a <div> with moz-reflect id;


<div id="moz-reflect">
	<img src="images/everything_matters.large.jpg">
</div>

And, to hold the reflection, we will use :after pseudo-element, as follows;


#moz-reflect:after {
	content: "";
	display: block;
	background: -moz-element(#moz-reflect) no-repeat;
	width: auto;
	height: 375px;
	margin-bottom: 100px;
	-moz-transform: scaleY(-1);
}

The -moz-transform with negative scale is used to flip the generated object upside-down. Also, make sure the height is precise enough to the real object’s height to avoid unnecessary extra lines for positioning the reflection.

Unfortunately, there is still no easy way to create a nice reflection effect in Firefox using this practice. The code above will simply create the reflection, without the fade effect.