CSS3 Image Reflections have been around for quite some time. Back when I was parsing out the iTunes website to get the latest statistics, I came across my application’s image without the reflection, shadow or other styles which made my icon really pop. This of course made me wonder how they were doing it without changing my app’s image, since of course I assumed they changed the icon after it was uploaded to their servers. A little more digging showed me that there was a CSS transformation that I had never seen before, and it was one of the first real powerful CSS transformation that I personally viewed.

A co-worker pointed me to this article today, which is an extremely simple reflection, and shows this technique very well. Since I had yet to create an article for my own reference, I’ve added it in here…

-webkit-box-reflect:
/* above|below|left|right */
/* pixel value start offset from image */
/* http://webkit.org/blog/181/css-masks/ */

A sample usage of -webkit-box-reflect looks like:
.reflectBelow {
-webkit-box-reflect: below 0
-webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
}

Unfortunately, if you are not using a WebKit based browser (iPhone/iPad/Safari/Chrome), you will not see the reflection. The bonus however is that you see how the reflection reacts to not being displayed – it degrades very gracefully, as it should.