Add reflection to an Image using Javascript


So you want to create reflection to an image but not so good at PhotoShop stuff, well there is an alternative: Reflection.js allows you to add reflections to images on your web pages. It uses unobtrusive javascript to keep your code clean.

It works in all the major browsers – Internet Explorer 5.5+, Mozilla FireFox 1.5+, Opera 9+ and Safari. On older browsers, it’ll degrade and your visitors won’t notice a thing. Best of all, it’s under 5KB.

Here are few cool examples:So, why use this javascript, here are few benefits (as per site)
– Fast and easy to implement. Just add class=”reflect” to the image.
– Don’t need to spend time in an image editor creating reflections.
– Works really well with forum avatars. Doesn’t require additional server work.
– It’s dead easy to change the opacity and height of the reflections.
– The reflections can respond to user action and above all its cool.

For more advanced stuff, like opacity changing with the user actions, there is reflect-o-matic tool. So get playing around and add a reflective logo… good idea right?



  1. Man, this is brilliant. Thank you very much.

Add a Comment