The re-introduced concept of long shadows is recently seen in conjunction with flat design, and as a reaction against elements such as drop shadows, textures, fake leather or wood, gradients, or skeuomorphic design.  The trend is most commonly seen in user interface elements and icons, although it can also be seen in logos, web design, and graphic design at large. Many programmer are playing with long shadow effects in CSS styles (see bottom of the page).


So, what is long shadow design?

Long shadows extend far past the main object and can be a mirror of the object itself. The term is borrowed from lighting and photography.


Photographers capture long shadows in images to create a high-drama effect, achieved when the sun is near the horizon at dusk and dawn.


Some also refer to Bauhaus as an inspiration for long shadow, although adding elongated objects, often in black or very dark color, probably better describe the Bauhaus style.


A tribute to Bauhaus by Andreas Xenoulis

The angles and shadows used in Bauhaus (and poster design of the Russian Avant-Garde) can look similar by not creating a true perspective or three-dimensional objects.

In design, the shadows often follow a 45-degree angle, mirror an object without perspective or vanishing point. The trend typically feature shadows that do not fade away from the object, although we see both.


The shadow can be a tint of the object’s color or, more commonly seen, a darker shade of the background color. A black shadow would not fall into this “trend.” This works best if the background also is a flat color. Another variation is to use two sets of shadows, the first light and the second darker.


Designers have “agreed” on making shadows 2.5 times longer than the shadowed object, at a 45-degree angle – some use 120 degrees – towards the lower right corner of the object. Shadow edges are sharp, not soft.


Shadows live within the element and often extend beyond an object to the surrounding frame.


Shadowing flat design

Long shadow design is borrowing from and is influenced a lot by flat design, elevating it to “almost flat.”

Just like flat design is based on simple shapes and clean lines, so is long shadow design. Furthermore, it also uses a color palette that is bright and vibrant. Color can be used for shadows, which may just be a shade darker than the hue it mirrors, instead of black or gray. The goal is not to create a three-dimensional effect, but rather an extra layer of dimension that is not entirely flat.


Dribbble has become the place place to look for flat and long shadow design inspirations.


More examples of long shadow design








How to create Long Shadow in Photoshop CS6


Long shadows in CSS

Here’s a link to “Long Shadows Generator” by Juani.