Text-shadow property
Last updated: 2026-09-13
text-shadow Text-shadow property
The text-shadow CSS property adds shadows to text to give it depth and visual hierarchy against its background. Each shadow takes a horizontal offset, vertical offset, blur radius, and color; multiple shadows can be stacked, separated by commas, to create glow, embossed, or outlined effects.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | Yes |
| Applies To | all |
| Animation Type | shadow |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
text-shadow: none | <shadow>#;⚙️ Values
| Value | Type | Description |
|---|---|---|
none | Keyword | No text shadow |
<shadow> | Type | Horizontal offset, vertical offset, blur radius, color |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| text-shadow | ✓ v10 | ✓ v12 | ✓ v3.5 | ✓ v1.1 | ✓ v9.5 |
| Supported in all major browsers | |||||
Tip： Setting the blur radius to 0 with a 1px offset can mimic an outline, but for real text outlines prefer -webkit-text-stroke.
Warning： Too many shadows or a large blur radius can hurt readability; use them sparingly and keep enough contrast with the background.
❓ FAQ
QWhat is the difference between text-shadow and box-shadow in CSS?
Atext-shadow applies to the glyphs themselves and follows the shape of the text; box-shadow applies to the whole element box and produces a rectangular shadow. text-shadow has no spread radius and does not support the inset keyword for inner shadows.
QCan I add multiple shadows with the text-shadow property in a single declaration?
AYes. Separate multiple shadows with commas, and the earlier ones render on top. Each shadow's arguments are horizontal offset, vertical offset, blur radius, and color. Stacking shadows is how neon glow and 3D text effects are built.
QHow do I create a text outline effect with text-shadow in CSS?
AUse four 1px shadows in the cardinal directions: text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000. A cleaner approach is -webkit-text-stroke: 1px #000.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
