Long Shadow Is The New Flat Design

Written by Kevin Liew on 11 Jul 2013
30,751 Views • Web Design

Even since Apple previewed its iOS7, Flat design has became even more famous in web industry. If you've been keeping yourself cutting edge, you should have heard of Long Shadow Design. Long shadow design evolve The differences between Flat and Long Shadow design? In Long Shadow Design, it's okay to have gradient, texture and even drop shadow.

I first heard about long shadow design from an article written by Jeff Escalante, I guess he must be pretty famous now because I think he is the first person noticed this trend. His article attracted many attentions, especially designers, you can see its effect in dribbble, just search long shadow, you will get heaps of result. Also, there are already a few articles were written specifically about it.

However, so far, I haven't seen a project that actually using this design. It's more like "cosmetic treatment" to user interface elements such as icons at the moment. I hardly see it used in elsewhere.

With some basic understanding and basic skill in Photoshop, you can create this effect pretty easily. Just find some flat or glyph icons, and add a long shadow rest at a 45-degree angle (left or right direction). Here is a quick example I made, pretty cool huh? Comparing flat and long shadow design, for some unknown reason, long shadow seems to be more attractive. I have no ideas what sorcery is this.

Long Shadow Demo by Queness Kevin Liew

Here we have a collection of Long Shadow designs from different designers. You can see how they utilise the shadow, its direction, gradient, texture and drop shadow. Some them don't even have its flat look anymore.


Long Shadow Icons by Georgi Davitaya


Tall Chess Icon by Andy Mangold


Minion iOS7


HintApp by Mike Beecham


Bowiewold by Angel A. Acevedo


Long shadow by Agata Kuczminska


Icons by Andre Goncalves


FaceTime by Jason Li


Date App by Al Power


Fox Icon by Christoph Gromer


Long shadow by Aiden Guinnip


Enough by Yigit


Long Shadow Experiment by Giuseppe Pessia


Electro Logo by Jonathan Hasson


Feather By Michael Berger


Minimum Icon byy Chris Casey


Long Shadow Adobe Icons by Geoffrey Brailsford


Apple Long Shadow by Same Berson


Flat Long Shadow Device Icons by Daniel Lu


Dribbble Icons by Clement


Man of Steel Icon by Kreativa Studio


Internet Explorer by Tomas Snop


Mo Logo by Mogo


Safari by Slava Beskrovniy


Skype by JustD


Twitter Icon by Xalion


I'm not very sure if this a fad or a trend that will last for a while, but I do like how subtle disproportional shadow makes flat icons look attractive. So far, you can see long shadow design impacts user interface elements the strongest. What do you think about long shadow design? 

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

Pritesh 11 years ago
At this rate Flat UI may become outdated before iOS 7 is launched.
Greg Brown 11 years ago
The Safari icon looks great. Much better than the one in the iOS 7 preview.
David 11 years ago
We're actually going round and round. At this rate, skeumorphism will be the trend again, and then bam! back to flat design. repeat.