text-shadow (CSS property)
| IE7 | FF2 | Saf1.3+ | Op9.5+ |
|---|---|---|---|
| None | None | Partial | Full |
| Inherited | Initial | Version |
|---|---|---|
| No | none |
CSS2, 3 |
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;
}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.
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
| IE | 5.5 | None |
|---|---|---|
| 6.0 | None | |
| 7.0 | None | |
| Firefox | 1.0 | None |
| 1.5 | None | |
| 2.0 | None | |
| Safari | 1.3 | Partial |
| 2.0 | Partial | |
| 3.0 | Partial | |
| Opera | 9.2 | None |
| 9.5 | Full |
This property is currently only supported by Safari up to and including version 3 and Opera 9.5. However, Safari doesn’t support multiple shadows.
User-contributed notes
- ID:
- #1
- Date:
- Tue, 08 Apr 2008 03:13:42 GMT
- Status:
- This note has not yet been confirmed for accuracy and relevance.
.title? I hope that's not implying the use of a title class on an non-heading element where a heading should have been used ...?
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
