How is this different from box-shadow?
text-shadow takes three numbers and a color: horizontal offset, vertical offset, and blur. Unlike box-shadow, it has no spread value, and the inset keyword isn't valid here. The shadow traces the actual outline of the glyphs, not a rectangular box. Multiple layers are comma-separated, and the first layer in the list paints on top — for outline and block-depth styles, that order directly changes the result.
Common usage patterns
The most functional use isn't decoration — it's rescuing readability: for a heading placed over a photo, a single soft layer like 0 1px 3px rgba(0, 0, 0, 0.6) separates the letterforms from the edge even as the background changes underneath. A neon look comes from three or four zero-offset layers with progressively larger blur, all from the same color family — the innermost layer near white, the outer layers fully saturated. Block depth is built from zero-blur layers, each shifted by one more pixel than the last. You can also fake an outline with four sharp one-pixel shadows, one per direction, though the cleaner approach today is the -webkit-text-stroke and paint-order: stroke fill pair.
Things to watch for
Don't treat the shadow as a contrast tool: accessibility checks compare the text color against the background color and ignore any shadow entirely. Instead of patching weak contrast with a shadow, it's safer to place a translucent layer behind the text. At small sizes and light weights, a blurred shadow makes letters unreadable — use it on headings 24px and up. A high layer count raises paint cost on large blocks of text, so keep the shadow count to what's actually visible on screen, and rather than animating the shadow with transition, change the opacity of a second layer instead. text-shadow has long been supported in every browser, so no vendor prefix is needed. You can prepare the background of the heading card with the gradient generator and combine the two snippets.