Design Trend: Long Shadow Design

We have talked about Flat Design Trend already. The next trending in the design world is Long shadow design. There was already a plenty of designers started Long shadow design. Before the name Long shadow design, the trend tagged along with Flat Design.

Long Shadow Design

Long shadow design means same as its title. The trend will use long shadows with 120 or 45-degree angle. The end of the shadow will be feathered or cutting edge. This trend cannot use for your entire design, but mostly used for icons and big bold text. Long shadow design can use along with your flat design.

Free Download!!

Long Shadow Generator – Photoshop Action (atn) Download now


Here are some Long shadow design inspirations for your reference. There are some resources below these images. So please read that too.

googlefontflatlongshademin ipad (1) jamy-icons-dribble man_of_steel_icon meteor-dribb minimum-icon minions stethoscope untitled-1 untitled-5 cloudon_longshadow dribbble (2) dribbble-longshadow enough face-time fox-icon flatflat-ui


Free Download!!

Long Shadow Generator – Photoshop Action (atn) Download now 

As we are in w3 world having latest technologies, you will not export your Long shadow design as png. So how can we do it in CSS3? Here are some resources to help you achieve this.

Long Shadows in CSS3 – Codepen

By Max

Long shadow generator   CodePen


Long shadows in CSS3 – CSS3Deck

By Luky Vj

Google Fonts CSS longshade Icon   CSSDeck



So why are you waiting for. Jump on your next design trend. What do you think about this new trend? Let us know in the comments. Please share it to your friends if you like it.


Web3Canvas provides Freebies & Resources for Designers.

  • Lulla

    “How can we done it in CSS3” – love it

    • Check the resources section at bottom. There is a codepen and cssdeck examples

      • I think he’s mocking your grammar, dude.

        • Apologize for the grammer. jst bcoz im not from an English Country. What is the correct usage?

  • Matt

    Aside from the fact that this type of shadow design is completely unrealistic… please write future articles in grammatically correct English.

    • Yes. Its unrealistic. But it looks good. that’s why lot of designers already using this method.

      Apologize for the grammer. jst bcoz im not from an English Country.

  • Jeff

    Hi …how is this done in photoshop??…thanks cool info 🙂

    • That’s little tricky. Use Drop shadow in Layer Style with an angle of 45 degree. Then connect the shadow with a pen tool. [There may be a better solution.]

    • Use smart object duplicates.

  • Player1

    It’s obvious from your writing that English is not your main language so don’t listen to these fools, thanks for the article.

  • notflatagain

    Step 1. Something beautiful hits the internet and designers (mostly dribbblers), jump on the bandwagon only to impress other people in our designer bubble.

    Step 2. Third rate web design blogs, hungry for links and traffic, post about this weeks “next big thing.” Then tutorials and freebies blast Twitter feeds and news sites as people attempt to recreate this new incredibly, awesome trend…

    Step 3. At some point along the way this once fresh new aesthetic implodes on itself because people get tired of it.

    4. Repeat


    “style = fart” -stephan sagmeister

  • We found this article to be a good resource for inspiration. Thanks for the insight! Check out Bates Creative’s perspective on the long shadow design trend here: