Add Depth to Flat UI with Flat Shadow.js

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.

Add Depth to Flat UI with Flat Shadow.js

[tut demo=”” download=””]

Using Flat Shadow.js

Basic Usage

To use this plugin, simply include the jQuery library and the jquery.flatshadow.js in your HTML files, create the markup and CSS as follows, and then call the flat shadow function, that’s it.

HTML Markup

<div class="flat-icon">FLAT</div>
<div class="flat-icon">UI</div>
<div class="flat-icon">IS</div>
<div class="flat-icon">PRETTY</div>
<div class="flat-icon">AWESOME</div>


.flat-icon {
	padding:23px 28px;
  	font-size: 45px;
  	font-weight: bold;
  	display: inline-block;
  	line-height: 100%;
  	overflow: hidden;
  	text-transform: uppercase;
  	margin-right: 15px;


color: "#3498DB",
     	angle: "SE",
            fade: false,
     	boxShadow: false // Accept full 6 digit hex color (#000000)

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.

Global Setting

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.

Box Shadow

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:


<div class="flat-icon" data-color="#2ecc71" data-angle="NE">FLAT</div>
<div class="flat-icon" data-color="#1ABC9C" data-angle="NW">UI</div>
<div class="flat-icon" data-color="#3498db" data-angle="SE">IS</div>
<div class="flat-icon" data-color="#9b59b6" data-angle="SW">PRETTY</div>
<div class="flat-icon" data-color="#34495e" data-angle="NE">AWESOME</div>

and call the function without those predefined options:


            fade: false,
     	boxShadow: false

That’s it. Now you have each element rendering differently without calling the function multiple times.

Individual Setting

Note: The predefined data markup will always override the global options you set in your function call.

[tut demo=”” download=””]


Pretty neat huh? This can also be applied to font icons such as Font Awesome and Elusive Icons, to create a beautiful presentation for your website with only a few lines of code and no images.

I can’t wait to see what you guys will use this plugin for. I hope you enjoy this post, and if you have any suggestions and questions, please let me know in the comments below.

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


    • Anthony,
    • September 29, 2013
    / Reply

    I like this, though if we add depth is it no longer “flat” design? Awesome work nevertheless!

    • sonsoncete,
    • October 5, 2014
    / Reply

    Awesome. I tried to do the same thing with just CSS and I had to give up because of rendering issues (lag while scrolling was terrible). I hope this one works better.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.


Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.