Showcase of Long Shadow Icon Design

Flat design has been a tremendously hot topic for the last couple of months, and we have also discussed it several times in our previous posts. And if we now take a look at websites and mobile apps around, some of them are flatter – no shadows, textures, fake leather and gradients.

The design looks simpler, spacious and has less distraction. It lets you focus on the content, which is the thing that matters most to users. I wonder what will come after this trend?

Recently, there is a little new trend emerging in the design community, which I assume started off when designers were trying to fix iOS 7 outlandish icons. Jeff Escalante, the one who initiate this trend discussion, called it Long Shadow Design.

He outlined that the “Long Shadow” design has some typical characteristics: the shadow extends at an approximately 45-degree angle, and has the size of 2.5 times of the object. Here’s an example.

As you can see above, the result is fascinating. The shadow gives a sense of depth, yet still maintains the flat look of the object. It’s tricky to achieve such long shadow effect only using CSS3.

However, we also don’t know whether this Long Shadow design, will take off as a future trend or not. To me, it is more logical and sensible to be applied for icons and logos. It might look awkward and feel inappropriate to have this kind of shadow all over.

In the mean time, here are some more “Long Shadow” design examples that we have put together for your inspiration.

#1 – Apple Logo @Eldin Heric

#2 – Skype @JustD

#2 – Camera @Jacob Cummings

#3 – Maxton Browser @Livin

#4 – Batman @Hawk Jon

#5 – Camera @Slava Breskovniy

#6 – iOS7 Safari @Mitchell Pash

#7 – Music @Jacob Cummings

#8 – Dribble @Xalion

#9 – Flat Club @miguelcm

#10 – Man of Steel @Kreativa Studio

#11 – Internet Explorer @Thomas Snop

#12 – Minions @Michael Burns

#13 – Mo @Mogo

#14 – North Side Fitness @Steve Testone

#15 – Personal Logo @Eldin Heric

#16 – PressPad @Bart Zimny

#17 – iTunes Radio @plicploc

#18 – Rubee @Ben Lee

#19 – Motherfuton News @Noah Stoke

#20 – Safari Icon @Jacob Cummings

#21 – Setting Icon @Marin Sotirov

#22 – Twitter iOS7 @Frederik Samuel

#23 – The Punisher @Brett Carel

#24 – Social Flat Icons @Graphic Burger

#25 – Download Button @Juns

If you have any thoughts, feel free to share it in the comment box below.