Andy Vaughn

CSS Text-Shadow

If only I didn’t have to use Photoshop to create drop-shadows for my title. I wish I could simply add an outline drop-shadow without having to render my title as an image. Or, what if I wanted to create a Twitter-like logo with thick outlines? Actually, I only want to improve the visibility of my dark text on dark background, but don’t want to ruin my design aesthetic. Isn’t there a declaration in CSS3 that lets me add text-shadow to my text?

Text-Shadow

I’m going to show you how to add a drop-shadow, outline, and improve the visibility of dark on dark text, using CSS.

Let’s take the above header and give it a drop-shadow using the following style declaration:

h3 {text-shadow: 2px 2px black;}

Text-Shadow

What did I do? I defined the shadow to be 2 pixels to the right and 2 pixels to the bottom of the original text. And, the color of the shadow is black.

Let’s now soften it up a bit, as it looks funky. I’m going to add a third dimension attribute of “fuzziness”. This definition goes after the first two.

h3 {text-shadow: 2px 2px 2px black;}

Text-Shadow

That looks a little better. But, what if I want the light to be coming in from the bottom right and not the top left? Let’s change the offset to a negative value.

h3 {text-shadow: -2px -2px 2px black;}

Text-Shadow

Instead of a drop-shadow, I’d like to add an outline. Is this possible, using text-shadow?

h3 {text-shadow: -1px 0 orange, 0 1px orange, 1px 0 orange, 0 -1px orange;}

Text-Shadow

In the above example, I used multiple text-shadows. I don’t know what the maximum number is, but I’ve tried quite a few (as you’ll see below).

Let’s try for a Twitter-style look:
*font “Qlassik Bold-Regular” is taken from the font-family of this site. Credit: Dimitri Castrigue


h3 {font: 4.2em 'QlassikBoldRegular', 'Gill Sans', Arial, sans-serif; color: #3CF; text-transform: lowercase; letter-spacing: -2px; text-shadow: -1px 0 1px white, 0 -1px 1px white, 0 1px 1px white, 1px 0 1px white, 0 0 8px white, 0 0 8px white, 0 0 8px white, 2px 2px 3px black;}

twitter

What I did to accomplish this look is define a lowercase sans-serif font in the same color as Twitter (#3CF). I then squished the text together with negative letter-spacing. With text-shadow, I defined a single-pixel offset outline of white, like I did in the previous example, I then defined a (0 0 8px white) shadow, which basically gives a fuzzy white outline to the text. By repeating it twice, I’m able to intensify the effect. I then defined an eighth shadow, the drop-shadow to make the outline stand apart from the white background.

Have fun!
If you can’t view the above effects, it means your browser does not support CSS3, and you should probably upgrade to a better browser

Posted by Andy Vaughn on April 1, 2010

3 Comments to “CSS Text-Shadow”

  1. Andy Vaughn says:

    Ok, you should be able to comment now. (but, comments are really *big* ~ currently fixing)

  2. Dan Artman says:

    Hello, I am a design junkie and your website is a great resource for both rookies and advanced designers. I’ve bookmarked you!

  3. Steve says:

    Wow, very cool. I am in the process of learning how to use CSS in some websites. I’ll be back for sure.