Image Reflections with CSS

By  on  
CSS Image Reflection

Image reflection is a great way to subtly spice up an image.  The first method of creating these reflections was baking them right into the images themselves.  Within the past few years, we've introduced JavaScript strategies and CANVAS alternatives to achieve image reflections without having to modify original images.  The minds behind WebKit have their own idea behind image reflection:  pure CSS.

The Webkit CSS

The -webkit-box-reflect property accepts a value in the following format:

	<direction> /* above|below|left|right */ 	
	<offset>    /* pixel value start offset from image */
	<mask-box-image> /* */

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)); 

An involved CSS value but well worth the work. The gradient is linear from left top to left bottom from transparent to white, showing half (0.5 the image).

WebKit first implemented CSS reflections in 2008 and, to my knowledge, no other browsers have implemented a similar API. I find that frustrating but image reflection isn't a priority so I can't complain too much.  I am glad, however, that this is just one of several CSS enhancements given to us by the developers of WebKit!

Track.js Error Reporting

Upcoming Events

Recent Features

  • 5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

  • Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

Incredible Demos

  • jQuery topLink Plugin

    Last week I released a snippet of code for MooTools that allowed you to fade in and out a "to the top" link on any page. Here's how to implement that functionality using jQuery. The XHTML A simple link. The CSS A little CSS for position and style. The jQuery...

  • Send Email Notifications for Broken Images Using MooTools AJAX

    One of the little known JavaScript events is the image onError event. This event is triggered when an image 404's out because it doesn't exist. Broken images can make your website look unprofessional and it's important to fix broken images as soon as possible.


  1. very good post thanks a lot

  2. Is it possible to have reflections for non-linear gradient as well? If so plz advice :). Thanks.

  3. Hopefully Firefox will catch on soon (and IE in a couple of years).

  4. It also works on any HTML element, not just images. Check it out:

    I haven’t had time to play around with it too much, but I did notice it kind of choked when I wrapped an h1 and ul in a div with the reflectBelow class.

    Very cool, though.

  5. thats great but sad that it doesn’t work in other browsers.

  6. dj

    Is it possible to apply this on a html digital clock or date in a website? If so, how to code it?

  7. PM

    Thanks for sharing it.

    It is not working even in Firefox and obviously in IE.


  8. Good post, bring on the day when browers are all on the same page with css & html interpretation

  9. This is really buggy in Chrome (20.0.1132.47 Mac). Had to opt for a JS version sadly.

  10. why do we use the old format for creating a ‘linear gradient color mask”, i checked the new format doesn’t work, why is that ?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!