Everything You Need To Know About CSS3 Text Shadow Effects

by 3 04/05/2012

With CSS3, a whole host of text shadow effects are available for us to play with. In this article, we’ll cover some of the effects you can make with relatively little CSS code.

CSS3 text shadows can be applied to any text on the page. The syntax for text shadows is as follows:

text-shadow:xPosition yPosition blurSize color;

Where:

  • xPosition is the horizontal position of the text shadow relative to the text.
  • yPosition is the vertical position of the text shadow relative to the text.
  • blurSize is the size of the shadows blur.
  • color is the color value – hex, rgb, rgba, hsl, hsla or named color.

Assuming that we had a paragraph with the class “myText” within our HTML, we could apply a text shadow with the following CSS:

p.myText { text-shadow:1px 1px 2px #f00; }

Here we are asking the browser to create a text shadow 1 pixel to the bottom right of the text, with a blur of 2 pixels and a color of red (which has the hex value #ff0000, which can be shorted to #f00). And here’s the finished effect:

Text with red shadow

Perhaps red isn’t the best color. Here’s a version in grey:

p.myText { text-shadow:2px 2px 2px #aaa; }

Text with grey shadow

Here, we’ve created a nicer text shadow effect which compliments the font.

For typography fanatics, it’s worth noting that in some browsers using text-shadow actually thins your font very slightly as it triggers a different anti-aliasing method. In the example below, the top text is rendered without a text shadow, while the bottom text has a white text shadow and appears slightly thinner.

Comparison of anti aliasing

So which browsers support text-shadow? Good news! Quite a few!

Browser Support for Text Shadow

Sadly, Internet Explorer does not support text shadows until version 10. For browsers that do not support text shadow, the text will still appear but the shadow will be missing.

10 other effects using CSS3 Text Shadow

With CSS3 text shadow, you can create many different effects. Let’s take a look at some:

Top left shadow

Using negative values for the xPosition and yPosition we can move the text shadow to the top left.

Top left shadow

p.myText { text-shadow:-2px -2px 2px #aaa; }

Shadow only

By setting the font color to the same as the background, we can create a shadow only effect.

Shadow only

p.myText { color:#fff; text-shadow:2px 2px 2px #000; }

Blurred Shadow

Having an xPosition and yPosition of 0 together with a large blur creates this effect.

Blurred shadow

p.myText { color:#fff; text-shadow:0 0 5px #000; }

Blurred Text

Setting the font color to transparent create this effect which makes the text look blurred.

p.myText { color:transparent; text-shadow:0 0 5px #000; }

No Blur Shadow

Setting the blur to 0 gives us another effect.

No Blur Shadow

p.myText { text-shadow:2px 2px 0 #aaa; }

Multiple No Blur Shadows

By using a comma, we can specify multiple text shadows. Here we have created the first text shadow with the same color as th background to give a semi-3D effect.

Multiple no blur shadows

p.myText { text-shadow:1px 1px 0 #fff, 2px 2px 0 #000; }

Far Away Shadow

Your shadow can be as near or as far away your text as you like. Watch over for elements with the CSS overflow property if you set it too far away as they may chop the shadow.

Far Away Shadow

p.myText { text-shadow:30px 10px 0 #aaa; }

Rainbow Shadow

You can use as many shadows as you wish. Here I’ve created a lovely rainbow effect.

Rainbow Shadow

p.myText { color:#000; text-shadow:1px 1px 0 red, 2px 2px 0 orange, 3px 3px 0 yellow, 4px 4px 0 green, 5px 5px 0 blue, 6px 6px 0 indigo, 7px 7px 0 violet; }

Outline Shadow

By creating 4 shadows around the text, we can create a outline effect.

Outline

p.myText { color:#fff; text-shadow:-1px -1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,1px 1px 0 #000; }

See Through Shadow

By using a rgba or hsla font color, we can see an alpha transparency value which allows us to see through the text, and see the shadow below.

See Through Shadow

p.myText { color:rgba(0,0,0,0.5); text-shadow:3px 3px 0 #aaa; }

RGBA is a new feature for CSS3 which allows you to set a alpha transparency value to RGB colors. Values for alpha transparency can range from 0 to 1. An alpha value of 0 will make the color entirely transparent, while a value of 1 will ensure there is no transparency. 0.5 and 0.8 work well for most effects.

HSL and HSLA are also new color formats for CSS3 and allow us to define colors based on hue, saturation and lightness. The value of hue begins with red at 0, with green at 120, blue at 240, going back to red at 360. Saturation and lightness are percentages, with 100% providing the most saturated/lightest value.

Live Demos

If you’d like to know more about each of the text-shadow effects shown here, I’ve uploaded the code to JSFiddle.

Coming Up

In a later article, we’ll explore @font-face and how it allows you to use custom fonts as web text. Until then, have fun with using these text shadows!

About 

Andi Smith is a Presentation Technical Architect who writes about web development, CSS and JavaScript on andismith.com. You can follow him on Twitter at @andismith.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

3 COMMENTS


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>