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 / aspect-ratio: Preferred Ratios, Natural Images, and Constraints

Use preferred aspect ratios with automatic sizing and inspect competing constraints. Distinguish a replaced image’s natural ratio from its CSS box and object-fit behavior.

CSS / Reference / caption-side: Place a Table Caption Above or Below

Place captions visually while keeping them first in the table’s source structure. Match caption text to the data and check alignment, width, and writing direction.

CSS / Reference / background-origin: Positioning References Versus Painting Boundaries

Choose a background image’s positioning box and distinguish it from background-clip. Compare how padding, borders, percentage sizes, and fixed attachment affect the reference.

CSS / Reference / letter-spacing, word-spacing: Compare Character and Word Spacing

Adjust character and word gaps independently using the same text and a normal baseline. Account for inheritance, language, wrapping, and excessive negative spacing.

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 / 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 / line-height: Unitless Ratios, Inherited Lengths, and Line Boxes

Choose scalable line-height values and compare ratio inheritance with fixed lengths. Separate line boxes from paragraph margins and test larger child text.

CSS / Reference / font-family: Font Lists, Glyph Fallback, and Loading

Build a font stack with appropriate generic fallbacks and inspect the fonts actually used. Distinguish naming a family from loading files and covering characters.

CSS / Reference / text-align: Text, Inline Content, and Block Alignment

Align text by physical or logical sides and distinguish it from centering a block. Inspect justification, final lines, and direction-sensitive layouts.

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.