text-shadow

Note: It is possible to put a drop shadow on boxes (HTML elements).

Text shadows can be created achieved in Webkit, Gecko, Presto and IE 10 with:

.darkShadow {
	text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.5);
}

The parameters are X offset, Y offset, Blur (optional), and Color amount. Note: You can not use color constants (such as "black"); specify color using hex or rgba notation.

CSS3, Please! has a good interactive way of testing this property.

This is an EXAMPLE of using the text-shadow.

When using text-shadow, it is a good idea to shut it off when someone selects that text. This acheived by:

::-moz-selection { background: Darkmagenta; color: #fff; text-shadow: none; }
::selection { background: Darkmagenta; color: #fff; text-shadow: none; }

This is an example of a double shadow. The CSS is:

text-shadow: 5px 5px 3px rgba(0,0,0,.25), -7px -3px #0FF;

Double Shadow Example


text-shadow:0px 0px 15px rgb(254,51,151);

Outer Glow


text-shadow:-3px -3px rgb(254,51,151), 3px -3px rgb(254,51,151), 3px 3px rgb(254,51,151), -3px 3px rgb(254,51,151);

Attempt at creating a stroke