CSS Property text-shadow
The text-shadow property adds shadow to text.
Summary
| Item | Value |
|---|---|
| Initial value | none |
| Inherited | Yes |
| Version | CSS3 |
| JavaScript syntax | object.style.textShadow="2px 2px #ff0000" |
CSS Syntax
text-shadow: h-shadow v-shadow blur color;
Property Values
The property values are listed in the following table.
| Value | Required | Description |
|---|---|---|
| h-shadow | Required. | The position of the horizontal shadow. Negative values are allowed |
| v-shadow | Required. | The position of the vertical shadow. Negative values are allowed |
| blur | Optional. | The blur distance |
| color | Optional. | The color of the shadow. |
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
text-shadow |
Yes | 10.0 | Yes | Yes | Yes |
Example
An example showing how to use text-shadow CSS property.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-shadow:2px 2px #FF0000;}<!-- w w w . j a v a 2 s. c om-->
</style>
</head>
<body>
<h1>Text-shadow effect</h1>
</body>
</html>Example 2
The following code shows the text-shadow property in use.
<!DOCTYPE HTML>
<html>
<head>
<style>
h1 {<!--from w w w . j a v a 2s. c om-->
text-shadow: 0.1em .1em 1px lightgrey;
}
p {
text-shadow: 5px 5px 20px black;
}
</style>
</head>
<body>
<h1>Thoughts about Fruit</h1>
<p>this is a test.</p>
</body>
</html>