A Web Design Community curated by Chris Coyier

Code Snippets Gallery

Code Snippets > CSS > CSS Text Shadow Submit one!

CSS Text Shadow

Regular text shadow:

p { text-shadow: 1px 1px 1px #000; }

Multiple shadows:

p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }

The first two values specify the length of the shadow offset. The first value specifies the horizontal distance and the second specifies the vertical distance of the shadow. The third value specifies the blur radius and the last value describes the color of the shadow:

1. value = The X-coordinate
2. value = The Y-coordinate
3. value = The blur radius
4. value = The color of the shadow

Using positive numbers as the first two values ends up with placing the shadow to the right of the text horizontally (first value) and placing the shadow below the text vertically (second value).

The third value, the blur radius, is an optional value which can be specified but don’t have to. It’s the amount of pixels the text is stretched which causes a blur effect. If you don’t use the third value it is treated as if you specified a blur radius of zero.

Also, remember you can use RGBA values for the color, for example, a 40% transparency of white:

p { text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); }

13 Responses

  1. stencil says:

    For ‘shadow’ use black eg: rgba(0, 0, 0, 0.4);

  2. Dyllon says:

    i wish i had coda.. (i have windows)

  3. The Coda clips addition is a great feature Chris. Thanks.

  4. Kerr says:

    Love the coda snippet feature. Very nifty.

  5. Great job Chris! Loving the Coda addition.

  6. Oooh! Nice. And lovin’ Coda even more.

    Thanks!

  7. AWESOME! Yet another great feature to the site!

  8. Ryan says:

    Just another great reason why Textmate owns.

  9. Why doesn’t Firefox support CSS text shadows? Is there a workaround for FF?

  10. Dor says:

    Firefox latest does support it.

    You may have to use -mozilla-text-shadow. (Not sure though.)

  11. For firefox, just add a copy of those lines and replace “text-shadow” with “-moz-text-shadow”.

  12. Is there a way to be able to achieve this effect while still having valid CSS(2.1, I know it’s valid in CSS3, but I need it for CSS2.1 as well).

  13. stella says:

    nope -moz-text-shadow doesn’t work

Leave a Comment

Remember:
  • Be nice.
  • Wrap multiline code in <pre> and <code> tags and escape it first (turn <'s into &lt;'s).
  • You may use regular HTML stuff like <a href="">, <em>, and <strong>
* This website may or may not contain any actual CSS or Tricks.