Style textShadowProperty
Style Object
Definition and Usage
The textShadow property sets or returns one or more text shadow effects.
Syntax
Set the textShadow property:
Object.style.textShadow="none|h-shadow v-shadow blur color|inherit"
Note:The textShadow property attaches one or more shadows to text. This property is a comma-separated list of shadows, each specified by 2 or 3 length values and an optional color. Omitted lengths are 0.
Return the textShadow property:
Object.style.textShadow
| Value | Description |
|---|---|
| none | Default. No shadow is drawn. |
| h-shadow | Required. Position of the horizontal shadow. Negative values may be used. |
| v-shadow | Required. Position of the vertical shadow. Negative values may be used. |
| blur | Optional. Blur distance. |
| color | Optional. The color of the shadow. InCSS color valuesyou can find a complete list of possible color values. |
| inherit | The value of the textShadow property is inherited from the parent element. |
Browser Support
All major browsers support the textShadow property, except Internet Explorer.
Example
Example
Add a shadow to text:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial (example.com)</title>
<script>
function displayResult(){
document.getElementById("p1").style.textShadow="5px 5px 1px #ff0000,10px 10px 1px #0000ff";
}
</script>
</head>
<body>
<p id="p1">This is some text.</p>
<br>
<button type="button" onclick="displayResult()">Add a shadow to text</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial (example.com)</title>
<script>
function displayResult(){
document.getElementById("p1").style.textShadow="5px 5px 1px #ff0000,10px 10px 1px #0000ff";
}
</script>
</head>
<body>
<p id="p1">This is some text.</p>
<br>
<button type="button" onclick="displayResult()">Add a shadow to text</button>
</body>
</html>
Try it Yourself »
Style Object Other Extensions