Add Depth to Flat UI with Flat Shadow.js

A while ago, I stumbled upon a post called Flat design casts a long shadow by the fine folks at Web Designer Depot and I was amazed by how adding a simple shadow could create such a beautiful depth of design to the flat UI elements. What if we bring this effect to the web?

Today, let me introduce to you a little jQuery plugin I created to do just that called, Flat Shadow. This plugin will automatically add a beautiful shadow effect to your HTML elements without you even opening Photoshop. I'll guide you through all the features available and how you can incorporate it in your work.

With the code above, all your elements will have a casting shadow effect like in our first demo where the shadow will cast in a south east direction.

The color option will allow you to assign a background color to all your elements at once. If you didn’t assign anything to color, the color will be randomly picked from a predefined palette.

For the angle option, you can assign the direction of the shadow that will be applied to the element inside .flat-icon container. All directions are supported whether it’s N (north), E (east), or a combination such as SE (south east), NW (north west). Again, if you didn’t assign anything here, the direction will be random.

For the fade option, instead of casting a flat shadow on the element inside, you can toggle this true to create a gradient shadow effect which will fade away as it goes further from the element. You can see this option in use in our Demo #4.

For boxShadow, you can create the same shadow effect but instead of applying the element inside, the effect will be applied to the container. This field accepts full 6 character hex color to define the shadow’s color of the container, for example if you want to add a black shadow effect, simply change the false from the code above to “#000000” and the container will have a black shadow casting from the same angle as the element inside.

Further Customization

If you are in need of specifically assigning each element with its own style, you can assign each element with a markup as follows:

Pete is a Bangkok entrepreneur, a UI designer, and a Ruby on Rails developer. He is the founder of Bucketlistly.com and MyColorscreen.com. Other than his businesses, design and development, he also loves astronomy, indie music, and blogging.