What is the CSS text-shadow Property?
The CSS text-shadow property adds one or more shadow effects directly to the characters of a text element. It was introduced in CSS2, removed in CSS2.1, and reintroduced in CSS3, where it has been universally supported ever since. Unlike box-shadow, text-shadow follows the letterform outlines rather than the element's rectangular box.
Text shadows are inherited, meaning they cascade down to child elements automatically. They can be applied to any element that displays text, including headings, paragraphs, buttons, and labels.
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);Syntax and Parameters
The syntax for a single text-shadow layer is simpler than box-shadow — it has no spread-radius and no inset keyword:
text-shadow: <offset-x> <offset-y> [blur-radius] <color>;- offset-x — The horizontal distance of the shadow. Positive moves it right, negative moves it left.
- offset-y — The vertical distance of the shadow. Positive moves it down, negative moves it up.
- blur-radius — Optional. How much to blur the shadow. Zero gives a hard, crisp copy of the text. Larger values produce soft glows. No spread-radius exists for text-shadow.
- color — The shadow color. Accepts any CSS color value, including
rgba()for translucency.
Popular Text Shadow Effects
Here are some of the most requested text shadow styles and the CSS that produces them:
Hard Shadow
Zero blur for a solid, geometric shadow. Common in vintage poster design.
text-shadow: 3px 3px 0 #000;Neon Glow
Multiple layers of the same color at increasing blur radii create an electric glow.
text-shadow: 0 0 8px #6366f1, 0 0 24px #6366f1;Embossed
A light shadow above and a dark shadow below gives a raised, pressed-into-surface look.
text-shadow: -1px -1px 0 rgba(255,255,255,0.8), 1px 1px 0 rgba(0,0,0,0.3);Long Shadow
Dozens of 1px layers stacked diagonally simulate a long flat-design shadow.
text-shadow: 1px 1px #aaa, 2px 2px #bbb, 3px 3px #ccc;Layering Multiple Text Shadows
Like box-shadow, the text-shadow property accepts a comma-separated list of layers. Each layer is drawn in order, with the first layer in the list painted on top. This allows you to build up complex effects that no single shadow layer could achieve.
The neon glow effect is the most common example of layering. By applying the same shadow color at two or three different blur radii, you create a convincing electric glow that fades naturally into the background.
text-shadow:
0 -2px 4px #fff,
0 -4px 10px #ff3,
0 -8px 20px #f90,
0 -12px 36px #c33;Accessibility Considerations
Text shadows can improve or hurt readability depending on how they are used. A subtle drop shadow on light-colored text placed over a complex background image can significantly improve contrast and legibility. Overusing dark shadows on already readable text, however, creates a cluttered appearance that strains the eyes.
⚠ WCAG does not include text-shadow in contrast ratio calculations. Always verify that the text itself has sufficient contrast against its background, independent of any shadow effect.
Frequently Asked Questions
Does text-shadow work on all browsers?
Yes. Text-shadow has been supported in every major browser, including Chrome, Firefox, Safari, and Edge, without any vendor prefix since CSS3. Internet Explorer 9 and older do not support it, but those versions have effectively zero market share today.
Can text-shadow replace an outline?
You can simulate a text outline by applying four text shadows at small offsets in each cardinal direction: text-shadow: 1px 0 black, -1px 0 black, 0 1px black, 0 -1px black. This technique works well for thin outlines. For thicker outlines, -webkit-text-stroke is a better option.
Why does text-shadow have no spread-radius?
The CSS specification simply omitted a spread value for text-shadow. The spec authors likely decided that a blur radius was sufficient and that a spread would add unnecessary complexity. If you need a thicker shadow, you can achieve a similar effect by layering multiple shadows with slightly different offsets.
Does text-shadow slow down rendering?
Text shadows are generally lightweight. They are rendered by the GPU in most browsers. The main risk is applying large blur radii to large amounts of text, which can be expensive to repaint. For headlines and short strings, even complex multi-layer shadows have negligible performance impact.