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.

Show Comments
FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail