Syntax: text-shadow: shadow1 [,shadow2, ……shadowN]
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.
Example:
.blue-bottom{color:#00AAFF; text-shadow:blue 0px 3px 1px;}
.blue-bottm2{color:#FFAA00; text-shadow:blue 0px 0.1em 2px;}
Comments are closed.