How to make the new long shadow trend with CSS?

Question

Out there is a new trend along with Flat UI called "long shadow".
This is an example picture:

Credit

I really like it and now I want an effect like that on my site. But I won't make a picture, I want to do it in CSS! (Or HTML5, jQuery etc).

I already found a generator for that (Long Shadow Generator by Juani Ruiz Echazú), but the generated CSS looks really really awkward.

Example:

.shape {
    text-shadow: rgb(20, 144, 120) 1px 1px,
    rgb(20, 144, 120) 2px 2px,
    rgb(20, 144, 120) 3px 3px,
    rgb(20, 144, 120) 4px 4px,
    rgb(20, 144, 120) 5px 5px,
    rgb(20, 144, 120) 6px 6px,
    rgb(20, 144, 120) 7px 7px,
    rgb(20, 144, 120) 8px 8px,
    rgb(20, 144, 120) 9px 9px,
    rgb(20, 144, 120) 10px 10px,
    rgb(20, 144, 120) 11px 11px,
    rgb(20, 144, 120) 12px 12px,
    rgb(20, 145, 121) 13px 13px,
    rgb(20, 146, 122) 14px 14px,
    rgb(20, 147, 123) 15px 15px,
    rgb(20, 148, 123) 16px 16px,
    rgb(20, 149, 124) 17px 17px,
    rgb(20, 150, 125) 18px 18px,
    rgb(20, 151, 126) 19px 19px,
    rgb(21, 152, 126) 20px 20px,
    rgb(21, 153, 127) 21px 21px,
    rgb(21, 154, 128) 22px 22px,
    rgb(21, 155, 129) 23px 23px,
    rgb(21, 156, 129) 24px 24px,
    rgb(21, 157, 130) 25px 25px,
    rgb(21, 158, 131) 26px 26px,
    rgb(21, 159, 132) 27px 27px,
    rgb(22, 160, 133) 28px 28px;
    box-shadow: rgb(28, 37, 48) 1px 1px,
    rgb(28, 37, 48) 2px 2px,
    rgb(28, 37, 48) 3px 3px,
    rgb(28, 37, 48) 4px 4px,
    rgb(28, 37, 48) 5px 5px,
    rgb(28, 37, 49) 6px 6px,
    rgb(28, 37, 49) 7px 7px,
    rgb(28, 38, 49) 8px 8px,
    rgb(28, 38, 49) 9px 9px,
    rgb(29, 38, 49) 10px 10px,
    rgb(29, 38, 49) 11px 11px,
    rgb(29, 38, 50) 12px 12px,
    rgb(29, 38, 50) 13px 13px,
    rgb(29, 38, 50) 14px 14px,
    rgb(29, 39, 50) 15px 15px,
    rgb(29, 39, 50) 16px 16px,
    rgb(29, 39, 50) 17px 17px,
    rgb(29, 39, 51) 18px 18px,
    rgb(29, 39, 51) 19px 19px,
    rgb(30, 39, 51) 20px 20px,
    rgb(30, 39, 51) 21px 21px,
    rgb(30, 39, 51) 22px 22px,
    rgb(30, 40, 51) 23px 23px,
    rgb(30, 40, 52) 24px 24px,
    rgb(30, 40, 52) 25px 25px,
    rgb(30, 40, 52) 26px 26px,
    rgb(30, 40, 52) 27px 27px,
    rgb(30, 40, 52) 28px 28px,
    rgb(30, 40, 52) 29px 29px,
    rgb(31, 41, 53) 30px 30px,
    rgb(31, 41, 53) 31px 31px,
    rgb(31, 41, 53) 32px 32px,
    rgb(31, 41, 53) 33px 33px,
    rgb(31, 41, 53) 34px 34px,
    rgb(31, 41, 53) 35px 35px,
    rgb(31, 41, 54) 36px 36px,
    rgb(31, 41, 54) 37px 37px,
    rgb(31, 42, 54) 38px 38px,
    rgb(31, 42, 54) 39px 39px,
    rgb(32, 42, 54) 40px 40px,
    rgb(32, 42, 54) 41px 41px,
    rgb(32, 42, 55) 42px 42px,
    rgb(32, 42, 55) 43px 43px,
    rgb(32, 42, 55) 44px 44px,
    rgb(32, 43, 55) 45px 45px,
    rgb(32, 43, 55) 46px 46px,
    rgb(32, 43, 55) 47px 47px,
    rgb(32, 43, 56) 48px 48px,
    rgb(32, 43, 56) 49px 49px,
    rgb(33, 43, 56) 50px 50px,
    rgb(33, 43, 56) 51px 51px,
    rgb(33, 43, 56) 52px 52px,
    rgb(33, 44, 56) 53px 53px,
    rgb(33, 44, 57) 54px 54px,
    rgb(33, 44, 57) 55px 55px,
    rgb(33, 44, 57) 56px 56px,
    rgb(33, 44, 57) 57px 57px,
    rgb(33, 44, 57) 58px 58px,
    rgb(33, 44, 57) 59px 59px,
    rgb(34, 45, 58) 60px 60px;
    background-color: rgb(22, 160, 133);
    height: 150px;
    width: 150px;
    font-size: 75px;
    line-height: 150px;
    text-align: center;
}

So is there a easier, cleaner and better way to do this without need of any graphic?

---

Explanation why I won't use any graphics

I love creative, unusual and outstanding animations. So I think, with this long shadows are really beautiful things possible.

I've an animation in my mind, which I really want to realize:
I have a text like "Stackoverflow". I add this text a CSS-transition. When I hover this text, it should display a smooth text-shadow.
The thought in a demo
Easy one. But how's about this long shadow would appear? It would be great. But it's going to be a huge CSS for just this animation. Unreasonable.

So I ask You smart heads out there. You know any easy CSS-Trick, or is there maybe a way to realize this with JavaScript or other librarys? Then I think there are more stunning effects possible than my little thought...

Answer 1

Check out this tutorial on how to do that with Sass: http://css-tricks.com/metafizzy-effect-with-sass/

and take a look at this CodePen with the full result: http://codepen.io/hugo/pen/nwivF

Your example above is pretty much the only way to do it with pure CSS, and while it does look pretty crazy - it will let you adjust those text-shadows using transitions and such.

Answer 2

Now after ~1 week I see, there isn't a lean & animateable solution at this time.
But when I ignore my most important requirements, there are different possibilities out there.
So I want to create a little overview over all these possibilities I found.

CSS-only

Bulky text-shadow solution
The first solution is my example code I posted. It is extreme bulky, but the result looks really similar to the sample picture. But if I want to animate this code, e.g with transition, it's going to be a extremly big CSS-code.
Conclusion

+ Very similar to the original effect on pictures
+ An only CSS way
+ Possible to generate CSS only animations
- Generate big bunch of CSS code
- Hard to create animations

Tools & Examples
One of the best tools to generate an only CSS way is the Long Shadow Generator by Juani Ruiz Echazú.

---

Bulky text-shadow solution with rgba
In Michael Mendelsohn's answer he suggest to use rgba to add opacity to generate a pretty fade-out effect. It can get a smaller bunch of CSS which maybe also be easier to animate. But it doesn't generate this similar effect like on the graphics.
Conclusion

+ An only CSS way
+ Possible to generate CSS only animations
+ Could be a slimmer CSS code than without rgba
+ Could be easier to generate animations
- Not similar to the original effect
- For a longer shadow, it will be again a lot of CSS

Tools & Examples
Just read the answer by Michael Mendelsohn. Didn't found any example / tool in the internet and hadn't time to create one, because it isn't an acceptable solution for my case.

---

Bulky text-shadow solution with SCSS
To reduce the LoC (Lines of Code) for the first solution, Front End Guy suggest to use SCSS. The code will be slimmer but looks akward and is harder to understand. But also this slimmer code is and will remain very big. Conclusion

+ Very similar to the original effect
+ An only CSS way
+ Possible to generate CSS only animation
+ Slimmer CSS than without SCSS...
- ... but it will be remain a bulky CSS
- Not everybody is familiar with SCSS so the code is going to be incomprehensible
- Hard to create animations

Tools & Examples
There is a Codepen Example which shows you, how to create a long-shadow effect with SCSS on different objects (Icons, Fonts, etc.)

---

JavaScript-only

Generate the CSS with JavaScript only
user1724911's answer describes a way to generate the CSS with JavaScript. In the background, it makes again this big bunch of code, but the JavaScript code is a lot slimmer than the "hardcoded" CSS. Animations are also possible in the same way (take a look at user1724911's answer).
Conclusion

+ Very similar to the original effect
+ To develop code is a lot slimmer
+ Animations are easy and lean to create
- In the background, there is this big bulky CSS code
- performance

Tools & Examples
Look at the answer by user1724911 to see also the code for the animation. I created a little example. Just with 1 HTML-Tag and little Lines of JavaScript. Codepen Example

---

jQuery Plug-In
I found also a small jQuery Plugin for Long-Shadow. It is extremly easy-to-use, but generates (in my opinion) an ugly shadow effect.
Conclusion

+ Extreme easy-to-use
- Very ugly effect

Tools & Example
I found this Plugin here.

---

Graphic & JavaScript

Issue for geeks
There is a site which have a really really stunning and wonderful Long-Shadow effect. The Site called We Are Impero. So I asked the Impero team, how they generate this wonderful effect. If the used a library or something. This was their answer:

It’s all custom designed and built. No framework to work on, it was a very difficult mission!

So it is self-made with graphics and JavaScript.
Conclusion

+ Most wonderful long-shadow effect i've ever seen
- Self made. And it was a hard work.
- Graphic, CSS & JavaScript are required

Tools & Examples
Just enjoy We are Impero's website.

---

Graphic-only

Photoshop work
So there is also the way to create this effect as an image. It is the easiest way, and it is the "original". But sadly not animatable... Or maybe, when I hover the picture, I create a gif with the animation and will show it? Not really :-)
Conclusion

+ The "original" effect
+ most adaptable
- Not animatable

Tools & Examples
In the web, there are hunderts of Long-Shadow examples. Just google it. Awwwards made a cool article about how to create this long-shadow effect in Photoshop.

---

So thank you all for your answers, ideas, inspirations and arguments. I'll give them, who I linked in my answer an upvote, because without you, I would just have 1 solution.
Maybe in the future, there it will be possible to create such things easier.

Cheers dTDesign

Answer 3

this is my code, I'm using it at my sites:

.longShadow{
    color:#fff;
    text-shadow:
    1px 1px rgba(0,0,0,0.01),
    2px 2px rgba(0,0,0,0.03),
    3px 3px rgba(0,0,0,0.025),
    4px 4px rgba(0,0,0,0.02),
    5px 5px rgba(0,0,0,0.015),
    6px 6px rgba(0,0,0,0.01),
    7px 7px rgba(0,0,0,0.01),
    8px 8px rgba(0,0,0,0.01),
    9px 9px rgba(0,0,0,0.01),
    10px 10px rgba(0,0,0,0.01),
    11px 11px rgba(0,0,0,0.01),
    12px 12px rgba(0,0,0,0.01),
    13px 13px rgba(0,0,0,0.01),
    14px 14px rgba(0,0,0,0.01),
    15px 15px rgba(0,0,0,0.01),
    16px 16px rgba(0,0,0,0.01),
    17px 17px rgba(0,0,0,0.01),
    18px 18px rgba(0,0,0,0.01),
    19px 19px rgba(0,0,0,0.01),
    20px 20px rgba(0,0,0,0.01),
    21px 21px rgba(0,0,0,0.01),
    22px 22px rgba(0,0,0,0.01),
    23px 23px rgba(0,0,0,0.01);
}

Answer 4

You can generate shadow planes of your text via javascript. Just take a look at this:

<html>
 <head>
  <style>
   body { // in this example I used 'body' as animated content
    font-weight: bold;
    font-size: 65px;
    color:rgb(155,155,155);
    transition: text-shadow 0.5s linear;
    -moz-transition: text-shadow 0.5s linear;
    -webkit-transition: text-shadow 0.5s linear;
    -o-transition: text-shadow 0.5s linear;
    text-shadow: 1px 1px 0px rgba(0,0,0,1);
   }
  </style>
  <script> // here we can add some styles, generated by js.
   var text_shadow = '';
   for(var p = 0; p < 100; p++)
   {
    text_shadow += (text_shadow? ', ' : '') + 2*p + 'px '+ 2*p +'px 1px rgba(0,0,0,' + 1/(p+1) + ')';
   }
   document.head.innerHTML += "<style> body:hover { text-shadow: " + text_shadow + ";  } </style>";
  </script>
 </head>
 <body>Stackoverflow</body>
</html>

But code, like this one, is hard for slow CPUs (100 planes for some text)... Just keep this in your mind.

Answer 5

I'd suggest a different approach. You're not going to get around having multiple text-shadows, but try using rgba(0,0,0,val) instead, where val is a number between say .5 and 0. Then, you may not need so many iterations.

Try this:

text-shadow: 1px 1px 1px rgba(0,0,0,.5),2px 2px 1px rgba(0,0,0,.4),3px 3px 1px rgba(0,0,0,.3),4px 4px 1px rgba(0,0,0,.2),5px 5px 1px rgba(0,0,0,0.1)

You can use whatever distances you want and however many iterations. Just a suggestion.

Answer 6

I give you my attempts, the first one using only CSS, anec the other one using CSS and a custom background PNG image.

• 1. CSS Only (Not good yet)

I tried using :before and :after with transparent background instead of this image but for now, it is not good enought yet.

You can see for yourself here, I got a little bug with the right part of the shadow

http://codepen.io/gfra/pen/KtoDB

I'm still working on it but if someone here has the time, you're welcome to help.

• 2 CSS and PNG Image (looks good)

I know that using an image is not the most efficient solution, has it adds one http request to the page load but I have a CDN to deliver my images so this is not a perforamnce issue on my website.

I find the result far from perfect but quite good if you care for the performance issue. I used this method because I have a lot of long shadows to add to my page and I don't want jquery to work too much at page load.

I'm still trying to figure out how to make it auto adjustable to the content of the div/a. For now, there are some magic numbers to fit the required dimensions.

http://codepen.io/gfra/pen/DLzxC

Answer 7

If you look at your credit image, it's going to be a lot of CSS: http://cssdeck.com/labs/google-fonts-css-longshade-icon

/* Google Font flat longshade Icon in pure css
   Create with love by @LukyVj 
   Inspired by so much people an works over the internet.
*/

@import url(http://fonts.googleapis.com/css?family=Marck+Script);
body {
    -webkit-font-smoothing: antialiased;
    background: #333;
    overflow: hidden;
}
.container {
    width: 245px;
    margin: 180px auto;
}
div.icon {
    /*transform*/
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    float: left;
    width: 245px;
    height: 245px;
    margin: 5px;
    display: block;
    background: rgb(150, 150, 150);
    font-family: "Marck Script",  sans-serif;
    text-align:center;
    font-size: 13em;
    font-weight: 500;
    line-height:.75;
    border-radius:15px;
    overflow:hidden;
}

div.icon:after {
    top: 0px;
    color: rgba(255, 255, 255, 0.9);
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    position: relative;
    text-align: center;
    padding-top: 54.05px;
    box-sizing: border-box;
    /*box-shadow*/
    -webkit-box-shadow: 1px 1px 0px #000 ;
    -moz-box-shadow:1px 1px 0px #000 ;
    box-shadow:1px 1px 0px #000 ;
}
/*The shadow of the squares */
.icon:before {
    content: '';
    display: block;
    float: left;
    width: 136%;
    height: 136%;
    position: absolute;
    margin: 29%;
    /*transform*/
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    /*linear-gradient*/
    background: -webkit-gradient(linear,60.06% 107.04%,39.94% -7.04%,from(rgba(0,0,0,.1)),to(rgba(0,0,0,0)));
    background: -webkit-linear-gradient(100deg,rgba(0,0,0,.1),rgba(0,0,0,0));
    background: -moz-linear-gradient(100deg,rgba(0,0,0,.1),rgba(0,0,0,0));
    background: -o-linear-gradient(100deg,rgba(0,0,0,.1),rgba(0,0,0,0));
    background: linear-gradient(100deg,rgba(0,0,0,.1),rgba(0,0,0,0));
}

.gf:after {
   -webkit-font-smoothing: antialiased;
    content: "F";
    background: #dd473d;
    text-shadow: 1px 1px 0 rgba(0,0,0,.15),138px 138px 0px #a83027, 137px 137px 0px #a83027, 136px 136px 0px #a83027,135px 135px 0px #a83027, 134px 134px 0px #a83027, 133px 133px 0px #a83027,132px 132px 0px #a83027, 131px 131px 0px #a83027, 130px 130px 0px #a83027, 129px 129px 0px #a83027, 128px 127px 0px #a83027, 126px 126px 0px #a83027,125px 125px 0px #a83027, 124px 124px 0px #a83027, 123px 123px 0px #a83027,122px 122px 0px #a83027, 121px 121px 0px #a83027, 120px 120px 0px #a83027, 119px 118px 0px #a83027, 117px 116px 0px #a83027, 115px 114px 0px #a83027,113px 113px 0px #a83027, 112px 112px 0px #a83027, 111px 111px 0px #a83027, 110px 110px 0px #a83027, 109px 109px 0px #a83027, 108px 108px 0px #a83027, 107px 107px 0px #a83027, 106px 106px 0px #a83027, 105px 105px 0px #a83027, 104px 104px 0px #a83027, 103px 103px 0px #a83027, 102px 102px 0px #a83027, 101px 101px 0px #a83027, 100px 100px 0px #a83027, 99px 99px 0px #a83027, 98px 98px 0px #a83027, 97px 97px 0px #a83027, 96px 96px 0px #a83027, 95px 95px 0px #a83027, 94px 94px 0px #a83027, 93px 93px 0px #a83027, 92px 92px 0px #a83027, 91px 91px 0px #a83027, 90px 90px 0px #a83027, 80px 80px 0px #a83027, 79px 79px 0px #a83027, 78px 78px 0px #a83027, 77px 77px 0px #a83027, 76px 76px 0px #a83027, 75px 75px 0px #a83027, 74px 74px 0px #a83027, 73px 73px 0px #a83027, 72px 72px 0px #a83027, 71px 71px 0px #a83027, 70px 70px 0px #a83027, 69px 69px 0px #a83027, 68px 68px 0px #a83027, 67px 67px 0px #a83027, 66px 66px 0px #a83027, 65px 65px 0px #a83027,64px 64px 0px #a83027, 63px 63px 0px #a83027, 62px 62px 0px #a83027, 61px 61px 0px #a83027, 60px 60px 0px #a83027, 59px 59px 0px #a83027, 58px 58px 0px #a83027, 57px 57px 0px #a83027, 56px 56px 0px #a83027, 55px 55px 0px #a83027, 54px 54px 0px #a83027, 53px 53px 0px #a83027, 52px 52px 0px #a83027, 51px 51px 0px #a83027, 50px 50px 0px #a83027, 49px 49px 0px #a83027, 48px 48px 0px #a83027, 47px 47px 0px #a83027, 46px 46px 0px #a83027, 45px 45px 0px #a83027, 44px 44px 0px #a83027, 43px 43px 0px #a83027, 42px 42px 0px #a83027, 41px 41px 0px #a83027, 40px 40px 0px #a83027, 39px 39px 0px #a83027, 38px 38px 0px #a83027, 37px 37px 0px #a83027, 36px 36px 0px #a83027, 35px 35px 0px #a83027, 34px 34px 0px #a83027, 33px 33px 0px #a83027,32px 32px 0px #a83027, 31px 31px 0px #a83027, 30px 30px 0px #a83027, 29px 29px 0px #a83027, 28px 28px 0px #a83027, 27px 27px 0px #a83027, 26px 26px 0px #a83027, 25px 25px 0px #a83027, 24px 24px 0px #a83027, 23px 23px 0px #a83027, 22px 22px 0px #a83027, 21px 21px 0px #a83027, 20px 20px 0px #a83027, 19px 19px 0px #a83027, 18px 18px 0px #a83027, 17px 17px 0px #a83027, 16px 16px 0px #a83027, 15px 15px 0px #a83027, 14px 14px 0px #a83027, 13px 13px 0px #a83027, 12px 12px 0px #a83027, 11px 11px 0px #a83027, 10px 10px 0px #a83027, 9px 9px 0px #a83027, 8px 8px 0px #a83027, 7px 7px 0px #a83027, 6px 6px 0px #a83027, 5px 5px 0px #a83027, 4px 4px 0px #a83027, 3px 3px 0px #a83027, 2px 2px 0px #a83027, 1px 1px 0px #a83027, 15px 1px 0px #a83027,16px 2px 0px #a83027,17px 3px 0px #a83027,18px 4px 0px #a83027,19px 5px 0px #a83027,20px 6px 0px #a83027,21px 7px 0px #a83027,22px 8px 0px #a83027,
23px 9px 0px #a83027,
24px 10px 0px #a83027,
25px 11px 0px #a83027,
26px 12px 0px #a83027,
27px 13px 0px #a83027,
28px 14px 0px #a83027,
29px 15px 0px #a83027,
30px 16px 0px #a83027 , 
31px 17px 0px #a83027,
32px 18px 0px #a83027,
33px 19px 0px #a83027,
34px 20px 0px #a83027,
35px 21px 0px #a83027,
36px 22px 0px #a83027,
37px 23px 0px #a83027,
38px 24px 0px #a83027,
39px 25px 0px #a83027,
40px 26px 0px #a83027,
41px 27px 0px #a83027,
42px 28px 0px #a83027,
43px 29px 0px #a83027,
44px 30px 0px #a83027,
45px 31px 0px #a83027,
46px 32px 0px #a83027;
}

Answer 8

What i am thinking is The alternate way to use long shadow is make a reactangle with with colour(use colour picker for shadows google) Then align it with the image .Its gotta solve your problem. see this for a diamond

#diamond {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom-color: red;
    position: relative;
    top: -50px;
         }
#diamond:after {
    content: '';
    position: absolute;
    left: -50px;
    top: 50px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top-color: red;
           }

Answer 9

The best way is using jquery flat shadow.

https://github.com/peachananr/flat-shadow

Usage

To use this on your website, simply include the latest jQuery library found here together with jquery.flatshadow.js into your document's , follow by the html markup and a function call as follows:

<div class="flat-icon"> FLAT </div>
<div class="flat-icon"> UI </div>

...

$(".flat-icon").flatshadow({
  color: "#2ecc71", // Background color of elements inside. (Color will be random if left unassigned)
  angle: "SE", // Shadows direction. Available options: N, NE, E, SE, S, SW, W and NW. (Angle will be random if left unassigned)
  fade: true, // Gradient shadow effect
  boxShadow: "#d7cfb9" // Color of the Container's shadow
});

Further Customization

With jquery.flatshadow.js, you can apply each individual elements with different effect by simply add a data-color and data-angle to your mark up as follows:

<div data-color="#2ecc71" data-angle="NE" class="flat-icon"> FLAT </div>
<div data-color="#1ABC9C" data-angle="NW" class="flat-icon"> UI </div>

and remove the color and angle global options as seen here:

$(".flat-icon").flatshadow({
  fade: true,
  boxShadow: "#d7cfb9"
});

Now, each individual element will have its own effect without you calling the function multiple times.

Answer 10

If your using LESSCSS this mixin will do the flat long shadows using mixin.

https://github.com/zensimilia/less-long-shadow

I'm using it in my site and it's working great

Answer 11

Oldie thread but still getting attention via being top indexed search for 'how to make long shadow in css'.

My 2-code-line workaround for element long-shadow with more modern CSS (clip path) to avoid the 50+ line mess here I used to use -- I found it was slowing my browser.

You can adjust sizes of shadow/element proportionally and it should still work out, but for a 300px square div and using a 31px box shadow:

  -webkit-box-shadow: 31px 31px 0px 31px rgb(38,64,100); 
  box-shadow: 31px 31px 0px 31px rgb(38,64,100);

  -webkit-clip-path: polygon(300px 0, 331px 31px, 331px 331px, 31px 331px, 0 300px, 0 0);
  clip-path: polygon(300px 0, 331px 31px, 331px 331px, 31px 331px, 0 300px, 0 0);

My working example here

A good clip path generator (keeping in mind you need to make the element smaller than the 6-point clip path, as box-shadow isn't counted in the element dimensions)