Design Trend: Long Shadows

A new trend is making its way through cyberspace – long shadow design.

The concept, which borrows themes from flat design, is popping up in a big way in recent weeks. The trend is impacting user interface elements and icons the strongest, but is starting to creep into other parts of website design.

What is Long Shadow Design?

Long Shadows

iPad Mini

fox icon

Long shadows extend far past the object in which they mirror.

“Long shadow” is not a new term. It is actually borrowed from lighting and photography. Photographers often show long shadows in images to create a high-drama effect. In natural light, long shadows are cast when the sun ins near the horizon, occurring both at dusk and dawn.

In design, long shadows have become a quick trend. In design, long shadows are being added to objects in flat design schemes. The shadows, which often rest at a 45-degree angle, mirror an object and add a lot of emphasis and drama.

What’s different about these shadows are that, they too, are flat. Designers are creating long shadows using a tint of the color with no fading, shading or graduation of color.

It seems like many designers hopped on long shadows almost all at once and are using the same basic idea. Even as far as the direction and angle of each shadow. (Most shadows fall to the lower right corner of the object at a 45-degree angle, although some designers are using 120 degrees.) Shadow edges are sharp and add an extra element of depth to the overall design.

Long shadow design is more limited than other concepts, because it is intended only for small elements. It is not something that designers are using for an entire project and is almost exclusively limited to icons or buttons.

So far, long shadow design is used primarily for smaller objects and elements such as icons. Shadows live within the element and often extend beyond an object to the surrounding frame. Many of the long shadow concepts we are seeing come from projects where designers are looking for creative ways to build icons for the upcoming Apple iOS 7.

Borrowing from Flat

Long Shadow Flat Icons

Clock

Flat Shadow

Long shadow design is borrowing a lot of the principles of flat design. It could even be considered a form of flat design (or you might call it “almost flat”).

Long shadow design is based on simple shapes and clean lines, as is flat design. It also uses a color palette that is bright and vibrant. Color is also used for shadows, which may just be a shade darker than the hue it mirrors, rather than black or gray.

By picking up and mirroring flat design concepts, long shadow design is meant to be used in conjunction with a flat design scheme. Elements employing long shadow design can be used with elements that are completely flat to create an interesting overall design scheme.

Where long shadow design removes itself from flat design is with the idea that elements take on more of a three-dimensional effect. While it works for long shadow design, some purists may argue that any effect designed to create that extra layer of dimension is not entirely flat.

Gallery of Long Shadow Design

Long shadow design is popular in mockups right now, although not as many projects have made it to publication yet. (But expect to see quite a few of them soon.)

The most notable example of long shadow design right now comes from American retailer JC Penney, which is running a television and internet ad campaign that uses long shadows.

Dribbble is a great place to look for flat and long shadow design inspiration. Here’s a gallery of some great examples of long shadows.

Flat Social Network

Long

Flat Skype

Man of Steel Icon

Flat Safari

Designmodo logo with long shadow

Social icons - freebie

M Flat

Long Shadow Icons

Rubee

Camera

Long Shadow Design Resources

Long Shadow Generator

Long Shadow Generator

Long Shadows in CSS3

Long Shadows in CSS3

Google Fonts CSS longshade Icon

Google Fonts CSS longshade Icon

Create a Long Shadow in Photoshop

Conclusion

Long shadow design seems to be an evolution of the flat design trend. Designers looking to create more depth but work within the concept of flat design have created a sort of middle ground with long shadows.

The idea is fun and user-friendly. The one thing to be aware of is creating clean and distinct shadows. Long shadows should be distinguishable and need to all follow the same patters of light, meaning every shadow within a frame needs to be at the same degree and angle. Remember, shadows are designed to mirror light and will all fall in the same direction at the same time.

Are you working on a project using long shadow design? Share it in the comments!

Carrie Cousins has more than 10 years experience in the communications industry, including writing for print and online publications, and design and editing. You can connect with her on Twitter @carriecousins and Google+.

Newsletter

39 Comments
  1. bluesdesign Jul 8, 10:41 am

    I don’t like Long Shadow Design,Because it looks a bit and no clear.

    Reply
    +5
    • Sam Aug 2, 8:38 pm

      How did this get so many upvotes when I can’t even understand this person is saying? IS that the point? That flat-long shadow designed icons are also unclear and mind-boggling as to why people hold them in such high regard?

      Reply
      +21
  2. Lourens Jul 8, 11:40 am

    I like this evolution of flat design, and it’s sometimes what is needed to make that one particular flat element just stand out that much more.

    That being said this addition to flat design should really be used only where needed and not overused!

    Reply
    +19
  3. Jordan Hoagbin Jul 8, 1:14 pm

    I like that designmodo logo with long shadow. Great color and amazing work.

    Reply
    +10
  4. Verpixelt Jul 8, 3:30 pm

    Hidden due to low comment rating. Click here to see.

    Reply
    -35
  5. Alan Lavery Jul 8, 3:31 pm

    Hidden due to low comment rating. Click here to see.

    Reply
    -8
  6. Phil Jul 8, 3:38 pm

    Hidden due to low comment rating. Click here to see.

    Reply
    -6
  7. Victor Jul 8, 4:09 pm

    Hi,
    How can you call it a “design trend” ? What are the benefits ? Any words on the integration of this kind of effect on a project ?

    Please young & old fellas designers, don’t reproduce those “trends”. Think about your process & strategy behind the product more than wasting time on a shadow angle fx.

    A client won’t ask you to explain how in photoshop you put your shadow and opacity % but he gonna ask you about your vision on its goals and a strategy.

    Tired of flat, skeu, long shadow, glossy, ios7.

    Think about a 10.000$ project you could be asked to work on and what could be your strategic approach on design toward the brief, your process, your creative recommendation, and all the constraints driven by your client.

    Think about reality. Ciao.

    Reply
    +97
  8. Christopher Jul 8, 4:14 pm

    Sorry, these look horrible.

    I can see myself doing flat design, but you won’t see me think of using long shadows at all.

    Reply
    +19
  9. Joel Jul 8, 4:32 pm

    Make sure when you use this long shadow design trend, you have a mono-colored background, perhaps some sort of grain filter applied to it. Also, it must be the only element on the image, definitely not in context where the long shadow wouldn’t make sense.

    Reply
    +5
  10. stu Jul 8, 4:43 pm

    it is not a trend, it is just something that 5 people on dribbble have done!

    Reply
    +22
  11. Artur Maklyarevsky Jul 8, 7:45 pm

    Im diggin it.

    But there is only so much we can do with Flat.

    So what is next? monochrome??

    Reply
    -2
  12. Brian Jul 8, 10:09 pm

    I’m tired of reading,seeing,hearing ‘new trend in web design,new trend in bla bla bla”
    Trend isn’t something come on the scene every month,every week and i’m sure a client will see this long shadow thing and will say ”apply to my project”. :)
    Please use long shadows only to showcase your icons.. :)

    Reply
    +4
  13. Elliot Jul 8, 11:54 pm

    I really like the design. The colour choices and design of the icons themselves help make the overall design look good.

    Unfortunately it’s not practical because we can’t have the shadow stretch off the edge of my smartphone!

    Reply
    0
  14. Juani Ruiz Echazu Jul 9, 1:25 am

    I have been working on a long shadows jQuery plugin during the weekend, would love to hear what people think about it! Demo and link to github is over here: http://sandbox.juan-i.com/flat/

    Reply
    -1
  15. Crispen Smith Jul 9, 3:35 am

    Okay, it’s not a trend, it’s a tool that is being proven in the wild and it *may* have it’s place. Sadly, as we all know that place will very quickly be the proverbial everywhere, and without good reason.

    That being said, to me, the most interesting thing in all of the examples was the Ruby icon that presented a beautiful balance of skeuomorphic and flat design goals. An effect, which to my eye, was not impacted by the long shadow so much as the 5 different tones of red applied to the gem facets. Yes, I’m sure the long shadow helped a bit but the icon would have worked without it.

    Reply
    +7
  16. Trevor Jul 9, 8:58 pm

    Something tells me someone was going for key word rich on this one.

    Reply
    +5
  17. Amy Jul 10, 2:36 am

    Hidden due to low comment rating. Click here to see.

    Reply
    -7
  18. Dave Jul 10, 5:32 am

    Flat design was a designer suit. Long shadows is the silk tie.

    Reply
    -3
  19. Nicolas Jul 10, 8:18 am

    How can be a superfluous detail an evolution of a design trend/dogma? Seriously guys, I think this is beyond my imagination. Why are designers committed to copycat this nonsense? I think dribbble is destroying designers minds, taste and respect for the profession.

    Designing is about solving problems. Is about communication, layout, typography, content. What’s happening here?

    What the hell are you trying to communicate with a long 45º shadow under an icon or interfase? That our apps and designs live in a perpetual sunset? I can’t believe how far this trend has come . It makes me sick.

    Shame on you. Again.

    Reply
    +18
  20. Billy Jul 16, 1:05 am

    I think this is so hilarious. Flat design goes 3-d.

    Don’t get me wrong, I love FD, but I posted a while back;

    “What’s next, drop shadows?”

    I was around when the first web discovered drops, and so I only want to say that

    we have all been here before…

    Reply
    +9
  21. Jacob Jul 17, 4:59 pm

    Google webapps icons have been doing this years now… some how missed your collection you should add one in. They have a much more subtle approach to this design pattern.

    Reply
    0
  22. Miguel Jul 24, 2:37 am

    Wow I really like this, I’m not very familiar with sass (There is a long shadow creator in scss) so I tried to make a hover example with long shadow with jQuery and css text-shadow, here is on jsbin. http://jsbin.com/utevuv/2

    Reply
    +2
  23. rory Jul 24, 10:10 am

    Just another fad. I’d rather work on my own creativity and come up with something originality rather than following the herd and pushing out trends and forcing them on to clients that don’t like them and don’t need them. This will disappear within a few months and then the new thing will pop up.

    I’m I getting too old for this industry at 36? I don’t know anymore.

    Reply
    +6
  24. Masshina Jul 30, 6:18 pm

    Mommy look I droped a shadow!

    Reply
    +4
  25. Cesar Coll Aug 1, 1:33 pm

    “If all you have is a hammer, everything looks like a nail”.

    Long shadows are just another tool. Use it when it makes sense.

    Reply
    +6
  26. Matt Aug 7, 2:01 am

    IMO it’s such a basic effect it will become way too over saturated, this will be a quick trend. That being said, it doesn’t mean there isn’t a time and a place for it.

    Reply
    +2
  27. Jeff Mulvihill, Jr. Aug 7, 2:26 am

    At least try to keep your shadows consistent… several of your examples have wonky shadows… Graphic Designers are just shaking their heads… possibly a tear of despair…….

    Reply
    0
  28. Jeremiah Lyles Aug 7, 3:47 am

    A Very nice Job.
    I learned something.

    Reply
    -1
  29. Jassi Roy Aug 7, 3:04 pm

    I’ve been doing long shadows in Corel Draw for years

    Reply
    0
  30. Nico Aug 7, 6:29 pm

    What? I thought it was a parody on flat design, not a trend. Anyways, it may have worked on one logo/icon, but now everyone on Dribbble is doing it and it isn’t really fitting.

    Reply
    0
  31. Jeff Aug 8, 4:53 pm

    This makes me sleepy.

    Reply
    0
  32. iAn Aug 9, 7:09 pm

    I wouldn’t call it ‘trend’.
    I’d call it ‘Just another way to mess the Flat’

    Reply
    0
  33. Maitreya Vyas Aug 20, 3:18 pm

    Not a trend!

    Reply
    0
  34. Bryan Sep 23, 2:28 am

    I love Flat Design and this new trend “Long Shadow”
    I made first project using long Shadow option.

    Reply
    -2

Leave a Reply

*
* Minimum length: 20 characters