The text-shadow property adds one or more shadows to text and its text-decoration. Each shadow is built from X/Y offsets, an optional blur radius, and an optional color.
It is inherited. The initial value is none. Shadows also apply to ::first-line and ::first-letter.
If you omit the shadow color, the browser picks a default. Set an explicit color for consistent results across browsers.
text-shadow: none | h-offset v-offset blur? color? | initial | inherit;Color may appear before or after the offsets. Separate multiple shadows with commas.
| Value | Description | Try it |
|---|---|---|
none | Default. No shadow | Try it |
h-offset v-offset | Required lengths. Negative moves left / up | Try it |
blur-radius | Optional. Larger values soften and widen the shadow (default 0) | Try it |
color | Optional shadow color (set it explicitly) | Try it |
| Multiple | Comma-separated list; first shadow paints on top | Try it |
initial | Resets to none | Try it |
inherit | Takes the parent’s shadow | Try it |
text-shadowStart with offsets and a color, then add blur or extra layers if you need soft glow.
2px 2px).4px).rgba()).| Piece | Required? | Role |
|---|---|---|
| Offset X / Y | Yes (when not none) | Where the shadow sits relative to the glyphs |
| Blur radius | No | Softens the shadow; defaults to 0 |
| Color | Recommended | Shadow paint color |
| Extra shadows | No | Comma-separated layers for richer effects |
Switch presets to compare no shadow, a hard offset, a soft blur, a glow, and layered shadows.
Each snippet focuses on text-shadow only. Use Try It Yourself for a live editor.
Two offsets and a color—no blur.
<style>
p {
text-shadow: 2px 2px #64748b;
}
</style>
<p>CodeToFun</p>2px is the X offset.2px is the Y offset.#64748b sets the shadow color.Add a blur radius for a softer, lighter shadow.
<style>
p {
text-shadow: 2px 2px 6px rgba(15, 23, 42, 0.45);
}
</style>
<p>CodeToFun</p>2px 2px still places the shadow.6px spreads the shadow edge.Comma-separated layers build glow and depth.
<style>
p {
color: white;
text-shadow:
1px 1px 2px black,
0 0 0.6em blue,
0 0 0.2em blue;
}
</style>
<p>CodeToFun</p>1px 1px 2px black paints nearest.0 0 … keeps glow centered on the glyphs.Small details that change how shadows look or perform.
Browsers may disagree on the default shadow color. Always set one.
box-shadowbox-shadow follows the box. text-shadow follows the letter shapes.
Heavy glow or dark shadows on busy backgrounds can hurt legibility. Prefer subtle values for body text.
Several wide blur layers can be expensive to paint. Keep UI shadows light.
Underlines and other text decorations share the same text-shadow.
text-shadow is a browser painting property. Node.js, Deno, and Bun do not apply it.
Interoperable across modern browsers since about July 2015. Safe for everyday typography effects.
Bottom line: Production-ready. Prefer explicit colors and modest blur for consistent, readable results.
One line: text-shadow is offset + optional blur + color, stackable with commas.
Learn how to change the case of text with CSS.
8 people found this page helpful