In order to access this site you need to enable JavaScript!

You are here: Reference > CSS > properties > text-shadow

text-shadow property

Browser support:

	3.5

Specifies a comma-separated list of shadow effects to be applied to the text of the element.

Note: The text-shadow property is supported in Firefox from version 3.5.

JavaScript page for this property: textShadow. You can find other example(s) there.

Possible values:

One of the following values:

•

This value can be used arbitrary times (use the , character to separate them)

•

Values in this order (use the space character to separate them):

<color>

possible but not necessary; left to personal choice

•

none

•

inherit

Description of values:

blur radius in non-negative length

The blur radius of the shadow in length units, 0 value means sharp, larger values mean the shadow is blurred. For the supported length units, see the length page.

color

The color of the shadow, if not specified, the value of the color property is used. For the supported color values, see the colors page.

horizontal offset in length

The horizontal offset of the shadow from the text in length units. For the supported length units, see the length page.

inherit

Takes the value of this property from the computed style of the parent element.

none

Default. No shadow is drawn.

vertical offset in length

The vertical offset of the shadow from the text in length units. For the supported length units, see the length page.

Default: none.

Example HTML code 1:

This example illustrates the use of the text-shadow property:

<head>
    <style>
        .example {
            text-shadow: green 4px 4px, blue -4px -4px;
        }
    </style>
</head>
<body>
    <p class="example">text shadow</p>
</body>