The
box-shadow add shadows to boxes, where as
text-shadow adds shadows to individual characters in text nodes.
The syntax of the text-shadow property is very similar to box-shadow, including prefixes, offsets, and the ability to add multiple shadows; except that there’s no spread, and inset shadows aren’t allowed:
snippet
/* single shadow */
text-shadow: topOffset leftOffset blurRadius color;
/* multiple shadows */
text-shadow: topOffset1 leftOffset1 blurRadius1 color1,
topOffset2 leftOffset2 blurRadius2 color2,
topOffset3 leftOffset3 blurRadius3 color3;
Like
box-shadow, when multiple shadows are declared, they’re displayed from front to back with the first shadow being the topmost. Text shadows appear behind the text itself.
An example of test-shadow.
snippet
text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5);
In the above example, the shadow extends three pixels below the text, three pixels to the right of the text, is slightly blurred (one pixel), and has a base color of black at 50% opacity.
Other examples:
snippet
h1, h2, h3 {
text-transform: uppercase;
text-shadow: 1px 1px #FFFFFF;
}
