Add shadows to text on web page using CSS3

Shadows can help give depth and influence to text and when done properly, adding style to a web page. Design programs like Photoshop and Paint.net allow text shadows to be easily created, but it is not recommended for search results to save text as an image where it cannot be searched by the search engine spiders.

In order to get around this, enter CSS3. CSS3 or Cascading Style Sheets version 3, allows not only the “stylization” of web pages, but a whole bunch of new functionality meant to take the place of products like Adobe Flash.

Now it is easy to create flash and animation in the browser using CSS3. A quick way to get started with CSS3 is to use the shadows. Below are several different ways to add shadows to your text using CSS3. Just copy and paste the code below into your CSS selector:

 
CSS Shadows NO BLUR

box-shadow: 5px 5px #818181;
-webkit-box-shadow: 5px 5px #818181;
-moz-box-shadow: 5px 5px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);

CSS Shadows WITH BLUR
box-shadow: 7px 7px 8px #818181; /* follows format left top width color */
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
Box Shadow
-webkit-box-shadow: 1px #CCCCCC;
box-shadow: 1px #CCCCCC;
Inset Shadow
(format is: Horizontal | Vertical | Blur Radius | Spread | Shadow Color | Hex Value )

-webkit-box-shadow: inset 1px 1px 5px 1px #999;
box-shadow: inset 1px 1px 5px 1px #999;
Text Shadow
text-shadow: 1px 1px 3px #666666;
filter: dropshadow(color=#666666, offx=1, offy=1);

Double Shadow (2)
text-shadow: 1px 1px 1px #fff, 2px 2px 0 #d9d9d9;

Multiple! (5)
text-shadow: 0 0 4px #FFF, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;

Have a good use for text shadows and the new CSS3? Let us know about it in the comments!