# text-shadow property

The `text-shadow` property sets a shadow for a text. As a value, the property takes `4` parameters, listed separated by a space, or the `none` keyword, which cancels the shadow completely (this is the default value).

## Syntax

`selector { text-shadow: x-offset y-offset blur color; }`
`selector { text-shadow: none; }`

## Parameters

Parameter | Description
--- | ---
x-offset | Sets a shadow offset along the X axis. A positive value shifts to the right, a negative value shifts to the left.
y-offset | Sets a shadow offset along the Y axis. A positive value shifts down, a negative value shifts up.
blur | Sets shadow blur. The higher the value, the more blurry the shadow will be. Optional parameter. If not specified, the shadow will be clear.
color | Sets a shadow color in any color units. Optional parameter. If not specified, the shadow color matches a text color.

Axis offsets and blur are specified in any size units, except percentages.

## Example

Let's move the shadow down and left and add a little blur:

`<div id="elem"> Lorem ipsum dolor sit amet. </div>` `#elem { text-shadow: 5px 5px 3px black; }`

:

## Example . Clear shadow

Now let’s make a red shadow, move it down and to the left, but remove the blur - the shadow will be clear:

`<div id="elem"> Lorem ipsum dolor sit amet. </div>` `#elem { text-shadow: 10px 10px red; }`

:

## Example . Uniform shadow

Now the shadow is not moved, but blur has been added to it:

`<div id="elem"> Lorem ipsum dolor sit amet. </div>` `#elem { text-shadow: 0px 0px 3px black; }`

:

## See also

- the `box-shadow` property
  that sets a container shadow

← →
↑
en ru