text-shadow
A shadow behind the letters of the text.
Syntax
text-shadow: x y blur color;Values
| Parameter | Type | Description |
|---|---|---|
| x y | length | Horizontal and vertical offset. |
| blur | length | The blur radius; 0 gives a sharp shadow. |
| color | color | The shadow color. |
Examples
A shadow and a glow:
<p style="font-size: 28px; text-shadow: 2px 2px 3px gray;">Soft shadow</p>
<p style="font-size: 28px; color: white; text-shadow: 0 0 8px deepskyblue;">Glow</p>Notes
Several shadows are separated by commas. A light shadow helps text stay readable on top of a photo.
See also
- box-shadow — A shadow around the element's box.
- color — The color of the text (and the default color of borders and SVG icons).
Related recipes
In the tutorial
- Shadows and gradients — Block and text shadows — box-shadow and text-shadow, linear and radial gradients, color stops.