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?

Ultimate Guide to Flat Website Design

Ultimate Guide to Flat Website Design

The combination of bright colors and exotic typography has paved the way for unique flat interfaces. Minimalism is... Read more

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.

ios icon

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

long shadow design trend

#2 – Skype @JustD

long shadow design trend

#2 – Camera @Jacob Cummings

long shadow design trend

#3 – Maxton Browser @Livin

long shadow design trend

#4 – Batman @Hawk Jon

long shadow design trend

#5 – Camera @Slava Breskovniy

long shadow design trend

#6 – iOS7 Safari @Mitchell Pash

long shadow design trend

#7 – Music @Jacob Cummings

long shadow design trend

#8 – Dribble @Xalion

long shadow design trend

#9 – Flat Club @miguelcm

long shadow design trend

#10 – Man of Steel @Kreativa Studio

long shadow design trend

#11 – Internet Explorer @Thomas Snop

long shadow design trend

#12 – Minions @Michael Burns

long shadow design trend

#13 – Mo @Mogo

long shadow design trend

#14 – North Side Fitness @Steve Testone

long shadow design trend

#15 – Personal Logo @Eldin Heric

long shadow design trend

#16 – PressPad @Bart Zimny

long shadow design trend

#17 – iTunes Radio @plicploc

long shadow design trend

#18 – Rubee @Ben Lee

long shadow design trend

#19 – Motherfuton News @Noah Stoke

long shadow design trend

#20 – Safari Icon @Jacob Cummings

long shadow design trend

#21 – Setting Icon @Marin Sotirov

long shadow design trend

#22 – Twitter iOS7 @Frederik Samuel

long shadow design trend

#23 – The Punisher @Brett Carel

long shadow design trend

#24 – Social Flat Icons @Graphic Burger

long shadow design trend

#25 – Download Button @Juns

long shadow design trend

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

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail