text-shadow Description:
The text-shadow property defines a comma-separated list of shadow effects to be applied to the element's textual content.
text-shadow in CSS Versions:
text-shadow Syntax:
text-shadow: none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit
- none
No text shadow. - color
The color of the text-shadow. - length
The first two length items are the location (down and right) of the shadow. The third is the amount of blurring. - inherit
The element should have the same text-shadow setting as the parent.
text-shadow Initial Value:
none
text-shadow Applies To:
All elements.
text-shadow Inheritance:
This property is not inherited.
text-shadow Browser Support:
text-shadow Examples:
basic shadow
<h1 style="text-shadow : 0.2em 0.2em;">
This headline will have a .2 em down and right shadow the same color as the foreground.
</h1>Blurred outline
<h1 style="text-shadow : 1px 2px 5px red;">
This headline has a blurred red headline.</h1>Two-tone shadow
<h1 style="text-shadow : 1px 1px red, 2px 2px blue;">
This headline will have a two-tone red and blue shadow.
</h1>text-shadow Special Notes:
- This property is not currently supported by any commonly used Web browsers.
- Be careful when you use it to make shadows where the text color is the same color as the background. Some search engines will see this as spoofing, even if the text is visible because of the shadow.
