Grow your CSS skills. Land your dream job.

Last updated on:

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

Comments

  1. stencil
    Permalink to comment#

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

    • Esger Jellema
      Permalink to comment#

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

  2. Permalink to comment#

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

  3. Permalink to comment#

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

  4. Permalink to comment#

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

    AWESOME! Yet another great feature to the site!

  8. Permalink to comment#

    Just another great reason why Textmate owns.

  9. Permalink to comment#

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

    • 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?

    • maxw3st
      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. Permalink to comment#

    Firefox latest does support it.

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

  11. Permalink to comment#

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

    • Netgeek
      Permalink to comment#

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

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

    nope -moz-text-shadow doesn’t work

  14. 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. Scott
    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. 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:

    http://en.wikipedia.org/wiki/Web_colors

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

    Complimenti per il sito!

  18. Permalink to comment#

    Hello
    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. Vicky
    Permalink to comment#

    Great!!!
    But it is not a valid property……

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

  21. 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. James
    Permalink to comment#

    props on the fools and horses reference :)

  23. esar
    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. Permalink to comment#

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

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

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

  27. Its not working on explorer.
    But grate post

  28. Isaac Designer
    Permalink to comment#

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

  29. Permalink to comment#

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

  30. Rich
    Permalink to comment#

    Thank you sir.

  31. 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;">
    
    RAINBOW TEXT IS LOVELY
    
    </div>
    

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

  32. Jane
    Permalink to comment#

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

  33. 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

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

    • 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. @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
    p
    {
    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. Permalink to comment#

    nice site anyway. ;)

  36. @Charles Bodman

    Thanks for awsome note sir ya i do agree good point

  37. elhaq
    Permalink to comment#

    No more coda snippet feature?

  38. 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. 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. Kevin
    Permalink to comment#

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

    • @Kevin
      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. i also had this problem with firefox
    but kishan solution was really useful and works
    thanks kishan

  42. Permalink to comment#

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

  43. moz-text-shadow doesn’t work

  44. Permalink to comment#

    Brilliant, thank you!

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

  45. 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. IE 10 now supports text-shadow !!!
    Finally

    Cheers’

  47. Stephan
    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-decoration:none;
        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;
        text-decoration:none;
    }
    article .entry-title a:hover{
        color: rgb(0, 173, 255);
    }
    
  48. check out other css3 text-shadow effects, and text board with text-shadow

    http://jignesh2882.wordpress.com/2013/06/03/text-shadow-using-css3/

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

  50. Vejay
    Permalink to comment#

    Text glow effects can be achieved like this :

    text-shadow: 0 0 10px #c61a1a;

  51. 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
    here

  52. Nivram
    Permalink to comment#

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

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".