The text-shadow property defines one or more comma-separated shadow effects, to be applied to the text content of the current element.
The image below shows how the text-shadow property is applied:
0px 5px 3px #555;
X-Offset Y-Offset Blur Color
The text-shadow style can accept multiple values in a comma separated list.
According to CSS2, the shadows are laid down in the order they appear, so if they overlap, the last one that is specified should appear on top. CSS3 has now changed that so they are applied in reverse order.
To create multiple shadows, the shadows are separeated with a comma.
h1 {
text-shadow: 5px 10px 2px #93968f,
-3px 6px 5px #58d1e3;
}
This example defines two text shadows at different locations, blur radius, and colors. This makes it look like there are two different light sources on the text.
To make a text shadow look realistic, remember these few shadow characteristics:
- A shadow which is close to the text is normally not as blurred as a shadow that is far from the text. A shadow that is far from the text usually implies a light soure which is also far from the text.
- A shadow which is close to the text usually implies that the underlying surface is close, that the light is close, or both. A close shadow is often darker than a distant shadow, because less light can get in between the shape and the underlying surface.
To remove a text-shadow, set the text-shadow property to none; no shadows will be associated with that element.