text-shadow

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

You can apply multiple text shadows by comma separating

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 or HSLa values for the color, for example, a 40% transparency of white:

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

Examples

See the Pen Complex Text Shadow Examples by Chris Coyier (@chriscoyier) on CodePen.

More Information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
2+ 1.1+ 3.5+ 9.5+ 10+ any any

Comments

  1. User Avatar
    Erick
    Permalink to comment#

    Don’t know why, but it only works in android 2.2.2 if i set the 3rd property different of zero.
    Ex.:
    text-shadow: 1px 3px 0 red; /does not work/
    text-shadow: 1px 3px 1px red; /works/

    • User Avatar
      Don

      Hi Erik,

      The 0 would also need the px with it as well so text-shadow: 1px 3px 0px red; should work.

    • User Avatar
      ben
      Permalink to comment#

      hi the 0 have to have a px on it

  2. User Avatar
    Ramendra
    Permalink to comment#

    Thanks it help me!

  3. User Avatar
    cissy
    Permalink to comment#

    very good

  4. User Avatar
    Ann
    Permalink to comment#

    Very cool, thanks for your examples! I didn’t know it was possible to have these effects with just text-shadow. So I can have multiple text-shadow styles as long as they are comma-separated?

  5. User Avatar
    Anji
    Permalink to comment#

    Thanks this is working fine

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

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag