What Is CSS text-shadow Property?
The CSS `text-shadow` property applies one or more shadow effects to text characters, accepting a comma-separated list of shadows each defined by horizontal offset, vertical offset, optional blur radius, and color. It was formally specified in CSS Text Decoration Module Level 3 (W3C) and enjoys near-universal browser support without vendor prefixes. Unlike `box-shadow`, `text-shadow` does not support a spread radius or `inset` keyword, making it a simpler but more constrained shadow model.
What Is CSS text-shadow Property?
The CSS `text-shadow` property applies one or more shadow effects to text characters, accepting a comma-separated list of shadows each defined by horizontal offset, vertical offset, optional blur radius, and color. It was formally specified in CSS Text Decoration Module Level 3 (W3C) and enjoys near-universal browser support without vendor prefixes. Unlike `box-shadow`, `text-shadow` does not support a spread radius or `inset` keyword, making it a simpler but more constrained shadow model.
How CSS text-shadow Property Works
Each shadow layer in `text-shadow` is rendered behind the text but above the element's background. The syntax is `text-shadow: offset-x offset-y blur-radius color`, where `offset-x` and `offset-y` are required length values (positive x moves the shadow right, positive y moves it down), while `blur-radius` defaults to `0` if omitted, producing a sharp hard shadow. The `color` value can be any valid CSS color, including `rgba()` and `hsla()` for transparency control. When multiple shadows are declared as a comma-separated list — e.g., `text-shadow: 1px 1px 2px black, 0 0 8px blue` — they are rendered in order, with the first shadow painted on top and subsequent shadows layered beneath. This stacking order is the opposite of `box-shadow`, which is a common source of confusion. The browser composites all shadow layers below the text fill, meaning the actual text glyphs always appear above every shadow. The blur algorithm is not precisely specified by the CSS specification, but browsers generally apply a Gaussian-blur-like effect using the blur-radius as a standard deviation approximation. A blur of `0` renders a pixel-perfect hard shadow at the specified offset. Larger blur values spread the shadow over a wider area and reduce its opacity at the edges, which is why high-blur shadows look more like glows than shadows. Because `text-shadow` is a pure CSS paint operation, it does not affect layout — shadows do not contribute to the element's box model dimensions, overflow calculation, or scrollable area. This matches the behavior of `box-shadow` and means adding a large shadow will not push sibling elements or cause unexpected reflow. However, very large blur radii on many characters on the page can trigger compositing overhead on the GPU, particularly on mobile devices.
Best Practices for CSS text-shadow Property
Always specify the color value explicitly rather than relying on the inherited `currentColor` default, since browser handling of the default differs slightly across contexts and dark-mode switches can produce unexpected results. Use `rgba()` colors with reduced alpha (e.g., `rgba(0,0,0,0.3)`) for drop shadows rather than fully opaque colors — this keeps shadows natural-looking across varied background colors and works harmoniously with CSS custom properties for theme switching. Limit shadow stacks to two or three layers maximum; each additional layer multiplies the paint workload per text glyph, and more than three layers rarely produces a visually distinguishable result. For glow effects, use a `0 0` offset with a medium blur and a semi-transparent color rather than multiple duplicate shadows, since a single well-tuned glow shadow is cheaper and easier to maintain than four identical layers. When building accessible UI, never rely on `text-shadow` alone to convey contrast — always verify WCAG 2.1 contrast ratios against the actual background color, as shadow effects are not factored into automated contrast checking tools like Lighthouse.
CSS text-shadow Property & Canvas Builder
Canvas Builder outputs production-ready Bootstrap 5 HTML with clean, semantic markup, which means hero headings, section titles, and display text are properly tagged as `<h1>`–`<h6>` elements with predictable class structures — making it trivial to layer `text-shadow` effects onto specific typographic elements without selector conflicts. Because Canvas Builder avoids inline style pollution and generates a single, maintainable HTML file, developers can add a custom `<style>` block or third-party stylesheet with targeted `text-shadow` rules that survive future template edits cleanly. This is particularly useful for hero sections where Bootstrap's built-in display utility classes can be extended with `text-shadow` to achieve polished, image-overlay typography without adding extra DOM elements.
Try Canvas Builder →