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); }


  1. User Avatar
    Permalink to comment#

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

    • User Avatar
      Esger Jellema
      Permalink to comment#

      Sometimes you need a white shadow for more contrast with the background

  2. User Avatar
    Permalink to comment#

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

  3. User Avatar
    Bill Robbins
    Permalink to comment#

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

  4. User Avatar
    Permalink to comment#

    Love the coda snippet feature. Very nifty.

  5. User Avatar
    Sergei Filippov
    Permalink to comment#

    Great job Chris! Loving the Coda addition.

  6. User Avatar
    Catherine Azzarello
    Permalink to comment#

    Oooh! Nice. And lovin’ Coda even more.


  7. User Avatar
    Pez Pengelly
    Permalink to comment#

    AWESOME! Yet another great feature to the site!

  8. User Avatar
    Permalink to comment#

    Just another great reason why Textmate owns.

  9. User Avatar
    Permalink to comment#

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

    • User Avatar
      Permalink to comment#

      How about a double – punched out text effect,
      text-shadow:1px 1px 1px rgba(255, 255, 255, 0.5), -1px -1px 1px rgba(0, 0, 0, 0.7);
      All text-shadow works in FireFox, this works in FireFox also?

    • User Avatar
      Permalink to comment#

      Firefox supports text-shadows just fine, and has for a long time now. It’s Chrome they don’t show up in for me. It’s not a Webkit thing either. I get text shadows in Safari, just not Chrome. Webkit seems to have a problem with CSS transitions that I don’t have with Firefox.

  10. User Avatar
    Permalink to comment#

    Firefox latest does support it.

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

  11. User Avatar
    Jason Miller
    Permalink to comment#

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

    • User Avatar
      Permalink to comment#

      Or you can modernizr.js plugin it can add support to any browser for all css attributes and selectors

  12. User Avatar
    Nicole Dominguez
    Permalink to comment#

    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. User Avatar
    Permalink to comment#

    nope -moz-text-shadow doesn’t work

  14. User Avatar
    Kevin Oh!
    Permalink to comment#

    When using multiple shadows… are they rendered in the order they are listed? For example, if I have a 1px shadow could I accidentally cover it with a 3px shadow because I listed them in my CSS in reverse order?

  15. User Avatar
    Permalink to comment#

    isnt there any other way of using colours in the website codes without typing the color codes. e,g using the name of the colour like red instead of something like this #FFFFF

  16. User Avatar
    Permalink to comment#

    Scott, you can use names of colors. Just use the name of the color in place of the hex value. The color “blue” is even used in this text-shadow example.

    You can find a list of supported CSS color names here:


  17. User Avatar
    musica gratis
    Permalink to comment#

    Grazie per l’articolo, non puoi immaginare quanto mi sia stato d’aiuto!

    Complimenti per il sito!

  18. User Avatar
    Permalink to comment#

    Be aware that setting css3 text-shadow will affect the anti-aliasing in google chrome on windows.
    Make a try if you are using Microsoft windows and you will see that in chrome fonts are ugly if you use css3 text-shadow.
    check the bug report in the Google chrome help forum”.
    And by the way, thanks Chris for sharing your knowledge.

  19. User Avatar
    Permalink to comment#

    But it is not a valid property……

  20. User Avatar
    Ray Cornelius
    Permalink to comment#

    This is nice to know. I have used it once or twice now.

  21. User Avatar
    graphic design
    Permalink to comment#

    Finally! I find a straight forward way to use drop shadow with css. I’m a newbie so I appreciate your post. Thank you

  22. User Avatar
    Permalink to comment#

    props on the fools and horses reference :)

  23. User Avatar
    Permalink to comment#

    Thanks for this Nice thread ;)

    I’m playing with it but I’m little confused about inner shadow!
    Is it possible or any way to use inner-shadow?

  24. User Avatar
    Ana Lee
    Permalink to comment#

    Nice Tutorial!, The text-shadow property really rocks.

  25. User Avatar
    Permalink to comment#

    Okay, I’ll speak my friend…..

    Hmmm….. you should show the demo page, so the other user can see what the exact goal of the article you write.

  26. User Avatar
    Permalink to comment#

    good tutorial, its really helpful for my website.
    thank you

  27. User Avatar
    בונה אתרים
    Permalink to comment#

    Its not working on explorer.
    But grate post

  28. User Avatar
    Isaac Designer
    Permalink to comment#

    how i can do it to works in IE?????

  29. User Avatar
    Permalink to comment#

    Perfect! Thank you so much. I’m assuming no support for IE? Surprise surprise.

  30. User Avatar
    Permalink to comment#

    Thank you sir.

  31. User Avatar
    Jason McLaughlin
    Permalink to comment#

    Here’s an example to brighten up your day – my own text shadow rainbow effect…

    <div style="padding: 100px;font-size: 20pt; color: #000; text-shadow: 0 0 4px white, 0 -5px 4px violet, 2px -10px 6px indigo, -2px -15px 11px blue, 2px -25px 18px green, -2px -40px 25px yellow, 2px -60px 33px orange, 0px -85px 40px red;">

    Absolutely of no use at all, but I like it.

  32. User Avatar
    Permalink to comment#

    I agree, the rainbow text is beautiful!
    Useless yes. But still beautiful :)

  33. User Avatar
    kishan sharma
    Permalink to comment#

    I think we can make this more browser friendly by attaching browser names in front of property like ::

    -webkit-text-shadow:0px 0px 10px #333; /* for chrome */
    -text-shadow:0px 0px 10px #333; /* for all browser*/
    text-shadow:0px 0px 10px #333; /* same as above*/
    -moz-text-shadow:0px 0px 10px #333; /* for firefox */
    -o-text-shadow:0px 0px 10px #333; /* for opera */
    -ms-text-shadow:0px 0px 10px #333; /* for ie 9+ */
    -khtml-text-shadow:0px 0px 10px #333; /* for gecko based browser*/

    and thats all

    • User Avatar
      Renato Alves
      Permalink to comment#

      Thanks man. Your code helped me alot. I appreciated that! ;)

    • User Avatar
      Charles Bodman
      Permalink to comment#

      @kishan sharma.

      Make sure the “standard” property is the last one you use.

      “text-shadow:….” should be after all “browser specific properties”

      This way when a browser finally implements the property standard, it uses it.

  34. User Avatar
    kishan sharma
    Permalink to comment#

    @Isaac Designer

    You can go to http://fetchak.com/ie-css3/ and download ie.htc file in root of ur server and then you can enjoy text-shadow in ie 5 also

    also you can use
    zoom: 1;
    background-color: #cccccc;
    filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc)
    progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color=#99cc99);

    <p>Catpops Design Shadow goes here</p> if you still dont wanna use ie.htc file chroma and zoom will do all your required editing good luck

  35. User Avatar
    Permalink to comment#

    nice site anyway. ;)

  36. User Avatar
    kishan sharma
    Permalink to comment#

    @Charles Bodman

    Thanks for awsome note sir ya i do agree good point

  37. User Avatar
    Permalink to comment#

    No more coda snippet feature?

  38. User Avatar
    Permalink to comment#

    Heu Louis take a look at http://css3pie.com/. Its a nice lib that allow using most CSS3 features on IE using and .HTC solution. It work nice and is one of best solutions i have seen for now.

    Reggards from Ccss-tricks, continue posting

  39. User Avatar
    Hafeez Ansari
    Permalink to comment#

    Thank you very much. This article help me alot to complete a CSS3 project. I also thankful to @kishan sharma for the codes provided for other browsers. Thank you for sharing.

  40. User Avatar
    Permalink to comment#

    Newbie here… how would you do this to a single word within a paragraph of text?

    • User Avatar
      Andrew Cheung
      Permalink to comment#

      Add a span around your word using the text shadow property. For example:
      &ltp>This is how to apply a text shadow to this &ltspan style=”text-shadow: 1px 1px 1px #000;”>word&lt/span>&lt/p>

      Though you would probably create a class for this and include it in your stylesheet instead of having in the HTML.

  41. User Avatar
    تور کیش
    Permalink to comment#

    i also had this problem with firefox
    but kishan solution was really useful and works
    thanks kishan

  42. User Avatar
    Permalink to comment#

    Nice, text-shadow property….really it’s awesome.

  43. User Avatar
    کیش و تور کیش
    Permalink to comment#

    moz-text-shadow doesn’t work

  44. User Avatar
    Permalink to comment#

    Brilliant, thank you!

    My Firefox works with text-shadow, shame even ie9 won’t play though.

  45. User Avatar
    Rex Rainey
    Permalink to comment#

    This is so great! With a little more experimentation I made some more elaborate styles using the text-shadow property. You can see them here, Extruded Styles and Elegant Styles.

  46. User Avatar
    Noël Widmer
    Permalink to comment#

    IE 10 now supports text-shadow !!!


  47. User Avatar
    Permalink to comment#

    This works well for large text. I’m going to use it of article headings that link to the article.

    article .entry-title {
        font-family: Bitter;
        font-size: 2em;
        text-decoration: none;
        margin-bottom: -8px;
        text-shadow:2px 0 0 black,
                    2px 2px 0 black,
                    0 2px 0 black,
                    -2px 2px 0 black,
                    -2px 0 0 black,
                    -2px -2px 0 black,
                    0 -2px 0 black,
                    2px -2px 0 black;
    article .entry-title a {
        color: royalblue;
    article .entry-title a:hover{
        color: rgb(0, 173, 255);
  48. User Avatar

    check out other css3 text-shadow effects, and text board with text-shadow


  49. User Avatar
    James Walker
    Permalink to comment#

    Thanks a lot! Can make buttons look a lot better now.

  50. User Avatar
    Permalink to comment#

    Text glow effects can be achieved like this :

    text-shadow: 0 0 10px #c61a1a;

  51. User Avatar
    Alex Jones
    Permalink to comment#

    Create a raised text effect with this code

     {text-shadow: 0px -3px 3px #191919, 0px -5px 4px #474747,
                   0px -7px 6px #323232, 0px -9px 9px #ADADAD;} 

    Can see a detailed demo

  52. User Avatar
    Permalink to comment#

    I saw a shadow once. It was dark. I was scared.

  53. User Avatar
    M Faraz Ahmed Sa

    Very nice good job.. i am really thank full to you all guys… thanks.


    Basic text-shadow:

    h1 {
    text-shadow: 2px 2px #ff0000;

    label { text-shadow: 1px 1px 1px #000, 4px 4px 4px red; }

  54. User Avatar
    Permalink to comment#

    No company shifted quite sufficient Hess אחסון אתרים וורדפרס Israel from 5 per month .All appropriate web hosting packages owners of WordPress sites, image site, and Irtaolit store, e-commerce, portal and more.
    In addition, the company shifted quite hes no specialized Peron Intentia business owners such as advanced virtual server rental, domain registration and packs boxes.
    Mail under the domain name of the business.
    No ace diverted enough – Hostdns.co.il –

  55. User Avatar
    Nick B
    Permalink to comment#

    I’m a newbie at this so how would I add a shadow to a single word within a paragraph? It would be a big help.

    • User Avatar
      Geoff Graham
      Permalink to comment#

      Try wrapping that word in a <span> and adding the shadow to it.

      For example, in your HTML:

      Hello <span class="text-shadow">World</span>

      …and in your CSS:

      .text-shadow: {
      text-shadow: 3px 3px 3px #333; /* or however you want to style it */

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.