CSS Property text-shadow








The text-shadow property adds shadow to text.

Summary

ItemValue
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.

ValueRequired 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>

Click to view the demo

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>

Click to view the demo