CSS text shadows are an effective tool to add depth, emulate a letterpress effect, or simply enhance the legibility of text. You can apply drop shadows to your text using the text-shadow property. This takes up to four values, as shown below.
<offset-x>- Positive value push shadow to right and negative to left
<offset-y>- Positive value push shadow to bottom and negative to top
<blur-radius>- Optional. Lesser the value, hard is the shadow where as higher the value shadow is more smooth
<color>- Optional. Any valid web font color
This states that the shadow extends three pixels below the text, three pixels to the right of the text, blur radius value of ten pixel, and has a base color of grey.
You can apply multiple shadows to text by specifying a comma-separated list of shadows as shown below
Multiple shadows are applied based on their position in stack from top to bottom with the first shadow being the topmost.
Tip: Use text shadow for short texts i.e. one liners or heading only. Do not use text shadow for long running texts. Also, you can make text in thin fonts more legible by applying 1 pixel text shadow.