CSS Text Shadow Examples

CSS Text Shadows can create a variety of different effects on a website, like create depth, dimension, contrast and many other just by using simple CSS code. The best thing about these effects is, it can be achieved with pure CSS, no image replacements and image heavy web designs. CSS3 finally eliminates the need for Photoshop when all you want to do is a simple shadow. The text-shadow property is used as follows.

text-shadow: <horizontal-offset> <vertical-offset> <blur-radius>* <color>*

1. horizontal-offset: The horizontal offset of the shadow (in any valid CSS unit) relative to the text. A negative value places the shadow to the left of the text. 
2. vertical-offset: The vertical offset of the shadow (in any valid CSS length unit) relative to the text. A negative value places the shadow to the top of the text. 
3. blur-radius*: Optional value to set the strength of the blue (in any valid CSS length unit). Defaults to 0 if not specified. A large blur-radius value 
4. color*: Optional value to set the color of the shadow. The value can be defined either at the start or very end of text-shadow. Defaults to the UI color if not specified. 

Note: Values with asterisks following them (*) denote they are optional.

Examples

text-shadow: 2px 2px 2px #33CC66;

CSS is Cool!

Double Shadow

CSS text-shadow property does not restrict you to with one shadow you can use as many shadows as you want. Syntax will be

text-shadow: shadow-one, shadow-two, shadow-three;

an example will be...

text-shadow: 4px 3px 0px #fff, 
9px 8px 0px rgba(0,0,0,0.15);

CSS is Cool!

text-shadow:0px 3px 0px #33CC66,
0px 14px 10px rgba(0,0,0,0.15),
0px 24px 2px rgba(0,0,0,0.1),
0px 34px 30px rgba(0,0,0,0.1);

Tutorial Jinni