How To Create Text Shadow Using CSS

You can create shadow effect of text using text-shadow property in CSS. In text-shadow property, the values are defined by a comma-separated list of shadow effects to be applied to the text of the element. The shadow effects are applied in the order in the text itself. Each shadow effect must specify a shadow offset horizontally and vertically and may optionally specify a blur radius and a shadow color. Here are syntax and examples for creating text shadow using CSS.

Syntax: text-shadow: shadow1 [,shadow2, ……shadowN]

where each shadow value is defined as horizontal-offset vertical-offset [blur-radius] color

A shadow offset is specified with two length values, usually in absolute measurement, that indicate the distance from the text. In horizontal offset, offset value specifies the horizontal distance to the right of the text. A negative horizontal length value places the shadow to the left of the text.

The second length value specifies the vertical distances below the text. A negative vertical length value places the shadow above the text.

The optional blur radius may be specified after the shadow offset. The blur radius is a length value that indicates the boundaries of the blur effect.

A color value may optionally be specified before or after the length values of the shadow effect. The color value will be used as the basis for the shadow effect. If no color is specified, the value of an inherited color property should be used.

Table of Contents

Examples of Text Shadow Effects

Here are some examples for creating shadow effect of text using text-shadow property in CSS.

Text Shadow Without Blur Effect

You can create text shadow without blur effect with specifying value of blur radius 0 and specifying some value on horizontal and vertical offset. Here is an example of this type of text shadow.

Example:

.dropshadow {color:green;text-shadow:2px 2px 0 gray;}
.pinkshadow{color:red; text-shadow:pink 1px 0.1em 0px;}

Text Shadow With Blur on Bottom Right

Here is an example to create text shadow with blur effect appearing on bottom right side with specifying positive value on horizontal and vertical offset and specifying value in blur radius.

Example:

.redblurry {color:blue;text-shadow:3px 3px 5px red;}

Text Shadow With Blur on Same Position

Here is an example to create text with blur effect appearing on same position with specifying 0 on horizontal and vertical offset and specifying some value in blur radius.

Example:

.solar {color:white; text-shadow:black 0px 0px 5px;}

Left Shifted Text Shadow With Blur

You can create text shadow shifted on left of original text with blur effect with specifying negative value on horizontal offset and some positive value in blur radius. Here is an example of this type of text shadow.

Example:

.grayshadow{color:brown; text-shadow:gray -3px 0px 3px;}
.blueshadow{color:pink; text-shadow:blue -1px 1px 3px;}

Right Shifted Text Shadow With Blur

You can create text shadow shifted on right of original text with blur effect with specifying positive value on horizontal offset and some positive value in blur radius. Here is an example of this type of text shadow.

Example:

.rightshadow{color:red; text-shadow:#FF00AA 3px 0px 5px;}
.rightshadow2{color:brown; text-shadow:gray 5px 1px 2px;}

Top Shifted Text Shadow With Blur

Here is an example to create text shadow shifted on top of original text with blur effect with specifying negative value on vertical offset and some positive value in blur radius.

Example:

.green-top{color:#00AA00; text-shadow:green 0 -0.05em 1px;}

Bottom Shifted Text Shadow With Blur

Here is an example to create text shadow shifted on bottom of original text with blur effect with specifying positive value on vertical offset and some positive value in blur radius.