text-shadow (CSS property)

Inherited Initial Version
No none CSS2, 3
Browser support (more…)
IE8 FF3.5+ SA1.3+ OP9.5+ CH2+
None Full Partial Full Partial


text-shadow: { shadow,… | none | inherit } ;


The property specifies one or more text shadow effects to be added to the text content of an element. text-shadow was originally specified in CSS2 but removed from CSS2.1 due to the lack of implementation among browsers. It’s currently also included in the CSS3 Text module.

Shadow effects are applied in the order in which they are specified. They don’t increase the size of a box, though they can extend past its boundaries, and their stack order is the same as the element itself.

text-shadow is inherited in CSS3.


This rule specifies a text shadow effect that’s black, extends 2px to the right of and below the text, and has a 2px blur:

.title {
  text-shadow: 2px 2px 2px #000;


Each shadow value must specify a shadow offset and, optionally, a blur radius and color.

The offset is specified using two length values; the first value represents the horizontal distance to the right of the text (if it’s positive), or to the left of the text (if the value’s negative); the second value represents the vertical distance below the text (if it’s positive) or above the text (if it’s negative).

The blur radius is specified after the offset values; it’s a length value that represents the size of the blur effect. If no radius is specified, the shadow will not be blurred.

The color can be specified before or after the offset and blur radius values. According to CSS2, if no color value is specified, the shadow will use the value of the color property instead. However, in CSS3 the specification states that the user agent determines the shadow color in the absence of a specified value.


Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
None None None None None None None None Full Partial Partial Partial Partial None Full Full Partial

Safari up to and including version 4 and Chrome versions up to and including 3 don’t support multiple shadows.

User-contributed notes

by sova
Thu, 04 Mar 2010 16:43:12 GMT

Neither Firefox 3.6 nor Opera 10 seem to support multiple shadows.

by perallan
Wed, 05 Aug 2009 06:59:39 GMT

Yes, and offcourse Safari 4 and Chrome?

by ianhaynes
Tue, 04 Aug 2009 15:53:08 GMT

And also updated for Safari 4 and Chrome

by a.buchhorn
Fri, 27 Mar 2009 16:15:09 GMT

This reference needs to be updated for Firefox 3 and IE8.

Related Products