CSS Flat Social Icons with Long Shadows

Tonight I’d like to continue my recent obsession with flat design and show you a few cool social icon examples. I wanted to come up with a small set of social icons that is completely image free. So I grabbed my favorite icon font Font Awesome from WeLoveIconFonts.com and got to work.

One particular design trend I’ve enjoyed lately is the “long shadow” effect. You know the one – where the shadow extends from the object all the way to the edge of the container.

That’s the one. I wanted to accomplish this with icon fonts and CSS. Turns out, it’s actually not as complicated as you might think!


Let’s dive in to some markup to see how I accomplished this.


Use this HTML:


Use this HTML:


Use this HTML:


Use this HTML:


Use this HTML:


Use this HTML:

Pretty neat, right? I really like how these icons look, and the nerd in me loves that this is 100% image free. One could even add CSS transitions or a hover state and really make these icons look cool…but that’s for another post.

Let’s look at the CSS required to create these icons.


I’ll make this really easy for you. If you want to create these effects on your site exactly as they appear here, just add these two lines to the head section of your HTML.


In case you’d prefer an explanation, here is how the stylesheet works more in-depth.

This chunk makes sure we apply the FontAwesome font to each icon, and styles each icon with base properties for sizing consistency.

One important aspect of this CSS chunk is the overflow: hidden; line, because it ensures that the shadow doesn’t extend outside the boundaries of the element.

Next comes the long shadow.

It looks like a lot, but it’s actually quite simple. Essentially we’re creating the long CSS shadow by overlaying shadow after shadow and moving them down and to the right 1 pixel at a time. I chose 150 pixels because it fit my icons good, but a smaller or larger number might be required for your implementation.

It seems a bit repetitive to write all that CSS, doesn’t it? If you use a CSS preprocessor like SCSS, you can accomplish this a lot easier.


Then, for the .fontawesome-twitter class just add this:

That’s a much quicker solution in my opinion, but not everyone has access to use a CSS preprocessor.

So what do you think? Do you like the icons? Do you think they are practical? Let me know in the comments below!

Here is the stylesheet in all it’s glory, in case you’d rather download it yourself.

Categories Blog