Simple Long Shadow with SASS and text-shadow

No modern design trend is as popular - or as notorious - as the long shadow. Long shadow designs have been making quite an impression on the web community for some time now, as a sub-trend of the flat design. While many designers love it, just as many can’t seem to stand it.

@nickrp I enjoy it because it makes me think of paper crafts. And construction paper. — Dean Wagman (@DeanWagman) August 26, 2013

Whether you agree with Mr. Pettit or not, at some point you may need to implement a long-shadow logo or icon somewhere on a the web. Chances are, you’d much rather not waste time with images (both on your end and your users). Fortunately, this effect is surprisingly easy to implement with just a short SASS function.

Below is a Pen with the SASS code I use to achieve this effect on a simple anchor tag with text.

$size: 100; $red: #b0232c; /* * Sass function modified from: * */ @function makelongshadow($color, $len) { $val: 0px 0px $color; @for $i from 1 through $len { $val: #{$val}, #{$i}px #{$i}px #{$color}; } @return $val; } .logo { display: block; width: #{$size}px; height: #{$size}px; font-family: helvetica, sans-serif; font-weight: 800; font-size: 3.0em; background-color: $red; color: WHITE; line-height: #{$size}px; text-align: center; letter-spacing: -3px; border-radius: 5px; text-decoration: none; overflow: hidden; text-shadow: makelongshadow(darken($red, 10), $size); -webkit-transition: all .3s linear; &:hover { text-shadow: makelongshadow(darken($red, 15), $size); } } See the Pen [%= penName %>]( by Jordan Foreman ([@JordanForeman]( on [CodePen](

We need to set overflow: hidden to avoid our text-shadow pushing out of bounds.