Use CSS text-shadow to paint one or more shadows behind text without changing the text element’s layout dimensions. A shadow is defined by horizontal and vertical offsets, an optional blur radius, and an optional color.
How to add a shadow to text in CSS
Add text-shadow to a CSS rule for the text element. For example:
h1 {
text-shadow: 1px 1px 2px black;
}This moves the shadow one pixel right and one pixel down, then softens it with a two-pixel blur. The color is explicitly set to black for a predictable result.
What is the text-shadow syntax?
The general form is text-shadow: offset-x offset-y blur-radius color;. The first two lengths are required; blur radius and color are optional. Color may also come before the lengths.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
- Offset-x: Positive values move the shadow right; negative values move it left.
- Offset-y: Positive values move it down; negative values move it up.
- Blur radius: A non-negative length controlling softness. A value of
0produces a sharp shadow; larger values create a softer, more spread-out and lighter effect. - Color: The shadow color. Specify it when consistent rendering matters; the reference description notes that an omitted color can depend on the user agent.
For example, text-shadow: 5px 10px; creates a sharp offset copy because the blur is omitted and defaults to zero. To remove shadows, use text-shadow: none;. See the MDN property reference and the W3C specification for the formal grammar.
How to make a blurry text shadow
Set a positive third length for the blur radius. For example:
Rank #2
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
.title {
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}The shadow is not displaced horizontally, moves two pixels downward, and has a six-pixel blur radius. Adjust the offsets and blur separately: offsets set direction and distance, while blur controls softness. The MDN guide to text shadows provides further examples.
Can you use multiple text shadows?
Yes. Separate shadow values with commas. Shadows are painted front to back: the first listed shadow is on top, as specified by the W3C CSS Text Decoration Module.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →.title {
text-shadow:
1px 1px 2px red,
0 0 1em blue,
0 0 0.2em blue;
}Layering can combine a crisp offset with a softer glow. Keep the layer order in mind when colors overlap, because later shadows are painted behind earlier ones.
Does text-shadow affect layout?
No. text-shadow changes the painted appearance of text, not the CSS box model or layout dimensions. It does not reserve additional space around the text. The property is inherited and applies to text, including ::first-line and ::first-letter, according to the MDN reference.
Rank #4
Why is text-shadow not working?
Check the value and the element receiving the style. Common issues include:
- Missing offsets: Provide both horizontal and vertical lengths, such as
0 2px. - Negative blur: Blur radius cannot be negative. Use zero or a positive length.
- Unexpected color: Set an explicit color rather than relying on the omitted-color behavior.
- Layer syntax: Separate multiple shadows with commas, not spaces alone.
- Inherited or overridden styles: The property is inherited, but a more specific rule or a later declaration may override it. Inspect the element’s computed styles in the browser’s developer tools.
text-shadow is listed by MDN as Baseline Widely available, with support across browsers since July 2015. For exact engine versions, consult the current MDN compatibility table.
Is text-shadow bad for accessibility?
Not inherently, but do not depend on the shadow to make text readable. W3C demonstrates how a dark shadow can help white text stand out on a pale blue background, while warning that text may be difficult to distinguish if a browser does not support the effect. Keep foreground and background contrast sufficient without the shadow, and treat the effect as an enhancement. W3C’s guidance on text-shadow and user-adjustable text presentation in Technique C22 offer more context.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
