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?

About Alex Shaikh

My name is Alex, and I am the author of the CrunchyChip website. For more than 15 years, I've been writing for blogs on a variety of topics, including technology. Thank you for reading this blog post. Please comment!