text-shadow: Glyph Shadows, Layers, and Contrast

CSS Reference

text-shadow adds glyph shadows using horizontal and vertical offsets, an optional blur, and a color. Unlike box-shadow, it does not accept spread or inset.

Syntax and value choices

Property	Initial value	Inherited	Main application conditions
`text-shadow`	none	Yes	All elements; visible effects depend on the text, image, or box conditions below

Initial values are not necessarily the values assigned to HTML elements by the browser’s stylesheet. Inspect the actual result in developer tools’ Computed panel.

.title { text-shadow: 2px 3px 4px rgb(0 0 0 / 35%); }

Value or category	Behavior and choice
`First two lengths`	Horizontal and vertical offsets; negative values reverse direction.
`Third length`	Nonnegative blur radius.
`Color`	Uses currentColor when omitted.
`Commas / none`	Layer several shadows / remove the shadow.

For supported values and conditions, see MDN text-shadow.

Run the example and compare results

Save this complete code as css-reference-10650-example.html in UTF-8 and open it in a browser. Keep its demonstration styles in that file rather than pasting them into a site-wide stylesheet.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>text-shadow comparison example</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { font-size: 30px; color: #006c9c; }
.target { text-shadow: 2px 3px 4px rgb(0 0 0 / 35%); }
.reference { text-shadow: none; }
</style>
</head>
<body>
<main id="demo">
<h1>text-shadow comparison</h1>
<section class="samples"><div class="a"><p class="label">Shadow applied</p><div class="target">CSS text shadow</div></div><div class="b"><p class="label">none</p><div class="reference">CSS text shadow</div></div></section>
</main>
</body>
</html>

The first text has a blurred lower-right shadow; the second has none. Painting a shadow does not directly increase text width or line height.

Several layers and sharp outlines

Earlier shadows are painted above later ones. Small opposite offsets can suggest an outline, but many blurred layers can obscure letterforms. Inspect actual small text and a narrow display rather than only large decorative headings.

Contrast over images

Shadows can help distinguish text but do not guarantee adequate contrast. Consider a background panel or a clearer foreground color when a photo’s luminance varies. Ancestor overflow can also clip the painted shadow.

Change one setting at a time

Use the complete example file above. Change only the specified selector or value rather than several comparison conditions at once.

Change only .target’s 4px blur to zero and restore it. Inspect whether the actual glyphs and their decoration remain distinguishable.
Add two comma-separated shadows and reverse only their order. For text over a photo, also inspect a background panel or foreground color: shadows do not guarantee contrast.

Check the relevant conditions in WCAG text contrast criteria.

For coordinated font sizing, line heights, and typeface choices, see CSS Fonts, Font Sizes, and Line Height. Related properties to compare alongside these conditions are box-shadow.

When the result is missing or unexpected

Do not copy spread or inset syntax from box-shadow.
Reduce blur and adjust alpha if the letters become difficult to read.

CSS Reference

CSS / Reference / font-size: Understand px, em, rem, and Text Enlargement

Choose text-size units by their reference and test nested em scaling. Check the actual root size, browser enlargement, and layout constraints.

CSS / Reference / word-wrap: Legacy Alias and Min-Content Wrapping

Use overflow-wrap to manage long strings and understand the word-wrap alias. Compare anywhere with break-word in intrinsic sizing and flex or grid layouts.

CSS / Reference / opacity: Group Transparency, Background Alpha, and Interaction

Fade an element and its children or make only its background translucent. Check stacking, contrast, keyboard focus, and the difference between transparency and hiding.

CSS / Reference / clip: Understand Legacy Clip and Migrate to Clip-Path

Read legacy rect coordinates and compare them with clip-path inset distances. Keep layout sizing and clipping separate when migrating existing CSS.

CSS / Reference / background-image: Images, Gradients, Relative Paths, and Layers

Paint gradients or image layers, resolve paths from the correct stylesheet location, and keep meaningful pictures in accessible HTML rather than background decoration.

CSS / Reference / overflow: Visible Overflow, Scrolling, Hidden, and Clip

Choose clipping and scrolling behavior with appropriate size constraints. Compare hidden with clip and inspect axis interactions and flex minimum sizes.

CSS / Reference / box-shadow: Offsets, Blur, Spread, and Inset Shadows

Build box shadows from offsets, blur, and spread, then inspect clipping and layering. Distinguish box geometry from glyph or transparent-image shadows.

CSS / Reference / list-style-type: Change List Markers and Numbering

Style list markers while keeping ordered and unordered semantics. Compare numbering styles, starting values, marker removal, and shorthand resets.

CSS / Reference / text-shadow: Glyph Shadows, Layers, and Contrast

Add text shadows without box-shadow-only syntax. Compare blur and layer order, preserve legibility, and avoid treating decoration as a contrast guarantee.

CSS / Reference / background-size: Cover, Contain, and Background Sizing

Compare background cover and contain using a known image ratio. Account for positioning areas, percentages, cropping, repeated tiles, and the element’s own size.