HTML and CSS Reference
In-Depth Information
the left of the text. The second length value specifies the vertical distance below the text.
A negative vertical length value places the shadow above the text.
An optional blur radius may be specified after the shadow offset. The blur radius is a
length value that indicates the boundaries of the blur effect.
A color value may optionally be specified before or after the length values of the
shadow effect. The color value will be used as the basis for the shadow effect. If no color is
specified, the value of an inherited color property should be used.
Examples
/* simple gray shadow drop */
.dropShadow {text-shadow: 2px 2px 0 gray;}
/* red blurry shadow right and below */
.redblurry { text-shadow: 3px 3px 5px red;}
/* sets an outline effect on the text */
.solar {background: white; color: white; text-shadow: black 0px 0px 5px;}
/* multiple shadows applied */
.ugly {text-shadow: 2px 2px 0px red, 2px -2px 0px green, -4px -4px 0px blue;}
O
NLINE
http://htmlref.com/ch6/textshadow.html
Compatibility
CSS2, 3
Chrome 2+, Firefox 3.5+, Opera 9.5+, Safari 3+
Notes
• This property was dropped from CSS 2.1 but is included again in CSS3.
• There may be limits to the application of multiple shadows, by browser. Some initial
implementations did not allow for more than one shadow, and some capped
shadow limits at various numbers like six.
• Internet Explorer can support text shadows using its proprietary CSS filters
technology. For example,
<h1 style="filter:progid:DXImageTransform.Microsoft.DropShadow(color
= "gray", offX = 2, offY = 2);">
IE DropShadow!
</h1>
