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>