text-shadow (CSS property)

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

Syntax

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

Description

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.

Example

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

Value

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.

Compatibility

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

ID:
#5
Contributed:
by sova
Date:
Thu, 04 Mar 2010 16:43:12 GMT

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

ID:
#4
Contributed:
by perallan
Date:
Wed, 05 Aug 2009 06:59:39 GMT

Yes, and offcourse Safari 4 and Chrome?

ID:
#3
Contributed:
by ianhaynes
Date:
Tue, 04 Aug 2009 15:53:08 GMT

And also updated for Safari 4 and Chrome

ID:
#2
Contributed:
by a.buchhorn
Date:
Fri, 27 Mar 2009 16:15:09 GMT

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

Related Products