Reflection.js is a JavaScript file which allows you to add reflections to images on your webpages. The script works by searching the document for images with the class reflect. Every time it finds one, it generates a new canvas element. Using the options specified, it then produces a reflection image.



It’s very quick and simple to include in any web page where you would like a reflection effect. Simply:

  1. Download the Reflection.js file from the website.
  2. Add a script tag referencing the JavaScript file.
  3. Add the class “reflect” to the image.
  4. Refresh your page!

There are a host of other options available to tailor your reflection effect, which can be read about it in further detail in the Reflection.js readme file.

Reflection.js works in all the major browsers – Internet Explorer 5.5+, Firefox 1.5+, Safari, Chrome and Opera 9+. On older browsers, it’ll degrade and your visitors won’t notice a thing. It uses unobtrusive JavaScript and is less than 5kb in size!

Download the Reflection.js tool, or try the demo with your own image.


Posted on:
February 27th, 2009
Posted by:
Andi Smith



Your Rating:
1 Star2 Stars3 Stars4 Stars5 Stars

Works on

BETA Please let us know if you find Reflection.js works in other browsers by leaving a comment below.


Add comment

(will not be published)