Pure CSS reflection effect

In this post I'm going to show you how to create a pure CSS reflection effect on text using some recent features of CSS3, namely transformations and opacity. There's nothing difficult with this approach, but at the moment of this writing CSS3 transformations are supported only through vendor-specific extensions. Here's our markup:

<h1>Test <span>Test</span></h1>

And here's our CSS:

h1 {
 font: normal 6em Impact, sans-serif;
 width: 400px;
 height: 250px;
 margin: 10px auto 0 auto;
 color: #333;
}

h1 span {
    color: #999;
 display: block;
 width: 170px;
 -webkit-transform: rotate(-180deg);
 -moz-transform: rotate(-180deg);
 -o-transform: rotate(-180deg);
 transform: rotate(-180deg);
 opacity: 0.3;
 position: relative;
 top: -37px;
}

We've applied a rotation of 180 negative degrees on the shadow element to create the peculiar effect of reflection. Note that also the opacity of the element has been changed. You can see a demo below.

Demo

Live demo

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

2 thoughts on “Pure CSS reflection effect”

  1. This doesn't look like a reflection, just a rotation. The upside-down text is not reflected across the horizontal axis; the letters don't line up underneath their equivalents.

Leave a Reply

Note: Only a member of this blog may post a comment.