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);
}