CSS text shadows: layers, overflow and readable text

Layer order and inheritance change what you see

CSS text-shadow takes a comma-separated list. Shadows paint front to back, so the first shadow is on top; this is a paint order, not a filter sequence. Each layer applies to text glyphs and their text decorations. The property is inherited, so descendant text receives the inherited shadow unless it declares its own value.

In CSS Text Decoration Level 3, shadows paint below underlines and overlines, and below the text itself. Line-through paints above the text. This order can matter where a thick shadow, underline or strike-through meets the glyph; compare the complete text, not just an isolated letter.

Choose the shadow that follows the intended shape

text-shadow follows text glyphs and decorations. box-shadow follows an element's box, including its border radius. The drop-shadow() filter follows the painted alpha silhouette, which is useful for transparent images and other irregular shapes; it belongs to the filter pipeline and has different syntax. Use the box-shadow guide for card edges, or a filter when the silhouette itself should cast the shadow.

CSS Text Decoration Level 3 does not allow spread distance or inset for text-shadow. Its optional blur radius cannot be negative. A newer Level 4 draft describes spread and inset for text shadows, but this version of the editor does not expose them; check browser support before relying on draft-only syntax.

Painted overflow does not make room in layout

A text shadow can paint outside the glyph and is not clipped to the text's shape. It is ink overflow: it does not reflow neighboring content or enlarge the scrollable overflow area. A nearby edge, another stacking context or a preview frame may still cover the painted shadow, so inspect it in the receiving component.

A shadow is decoration, not a WCAG certificate. Check the actual text and background contrast, font size, weight, wrapping and focus indicators; a glow can make letter edges harder to distinguish. In forced-colors mode, browsers force text-shadow to none at paint time. Do not use forced-color-adjust: none to bring a decorative shadow back; keep meaning and focus visible without it.

Preview with the actual text and system fonts

Glyph outlines vary with the selected font and fallback fonts; emoji can use a separate color-emoji font. Browser and operating-system rasterization may also differ. The editor uses system fonts and does not export a font-family declaration, so the same CSS can look different in your site. Compare the original and shadowed text, then test the target browser, language, font stack, line wrapping and zoom.

The preview is a visual comparison, not a layout simulation or accessibility test. Long text, narrow containers, mixed scripts and emoji can expose collisions that a short sample does not. Fluid type can change the result again at different viewport widths; verify the component at its supported sizes.

Know the four-layer editor limits

The editor starts with the soft preset and offers soft, glow, retro and none. You can edit up to four ordered layers. Choosing a preset replaces the current layer edits after an inline confirmation when the edits are dirty. Turning off or deleting every layer emits text-shadow: none;. Disabled layers are skipped for validation and output; an invalid enabled layer blocks both CSS and the visual effect preview.

For each layer, X and Y offsets range from −100px to 100px and blur from 0px to 100px, each with at most one decimal place. Opacity ranges from 0 to 1 with at most two decimals; colors use 3- or 6-digit HEX. The preview font size accepts integer 12–96px; text and background colors also use 3- or 6-digit HEX. These are v1 editor limits, not CSS limits. Invalid preview font or color settings block only the effect preview; valid layer settings can still produce CSS.

Custom comparison text is limited to 200 UTF-16 code units. Longer text is not truncated: it disables the visual preview while CSS generation remains available because the text is not part of the declaration. The editor outputs only the text-shadow declaration; preview font size, text color, background color and sample text are not exported. Values stay in page memory only: no upload, storage or URL parameters.