Text shadow is a different animal from box shadow

text-shadow shadows the glyphs themselves, not the element's rectangle. The shadow traces the outline of every character, including the counters inside letters like "o" and "e", so a blurred shadow reads as ink bleeding around the letterforms rather than as a rectangle offset behind a box. That single difference explains almost every rule that follows.

The biggest practical consequence is that the property has no spread radius and no inset keyword. Those two exist on box-shadow only. If you have ever written text-shadow: 0 0 0 2px white hoping for a crisp outline around a heading, and watched the browser silently discard the fourth length, this is why: after the two offsets and the blur there is nowhere left for another number to go.

It is also an inherited property, which box-shadow is not. Set it once on body and every descendant picks it up until something sets text-shadow: none. That is handy for a whole-page glow effect and a nuisance when a single code span or form label suddenly acquires a blur nobody asked for.

What the four inputs do

Input	Effect	Range here
Offset X	Moves the shadow copy of each glyph horizontally. Negative shifts left.	-50 to 50 px
Offset Y	Moves it vertically. Positive shifts down.	-50 to 50 px
Blur	How far the shadow's edge spreads out from the glyph outline. At 0 the duplicate stays perfectly sharp and you can see the letterform repeated.	0 to 200 px
Color / opacity	Hex plus an alpha slider. Below 100% the output becomes rgba(); at full opacity the generator writes the hex.	any hex, 0 to 100%

CSS also accepts the colour before the lengths, and accepts lengths in em or rem, so a shadow expressed in em scales with the font size instead of staying fixed. This generator emits pixel values, which is what you want for a shadow tuned to one specific heading size.

Two presets compared

Reach for Pop and the output is:

text-shadow: 0px 3px 0px #0f172a;

Zero horizontal offset, three pixels down, zero blur, fully opaque ink. Because there is no blur, the browser paints a hard duplicate of every glyph three pixels lower, and the eye reads the pair as one solid extruded letter. No colour interpolation happens anywhere, which is why the generator writes the plain hex here rather than rgba(). It is a strong effect for a short heading on a bright background and it turns body copy into a screaming mess.

Now try Glow, which produces:

text-shadow: 0px 0px 16px rgba(225, 29, 72, 0.8);

Both offsets are zero, so the shadow is not displaced at all — it radiates equally in every direction from each glyph, and the 16px blur is what becomes visible. A coloured glow only reads against a dark surface: on white, a red halo around dark text is mostly invisible, and on a mid-tone background it just looks like the type is out of focus. The softer Soft and Depth presets use a small alpha (35% and 55%) precisely because a shadow you notice is usually too strong.

Making an outline without spread

Since there is no spread, a solid outline has to be built from repeated shadows at blur zero, one for each direction:

text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;

Four copies at the four diagonal neighbours give a passable one-pixel outline. Eight directions is tighter still. It is a common technique for caption text laid over photographs, where a dark outline buys legibility that a soft shadow cannot.

Where text shadows go wrong

• A shadow is not contrast. WCAG text contrast is measured between the text colour and the background behind it. A glow does not count toward that ratio, and a bright halo directly under thin strokes can reduce perceived contrast for readers with low vision even though it looks decorative to you.
• Small type smudges. A blur radius anywhere near the font size turns a 12px label into a grey smear. Keep offsets and blur well under the type size, or skip the effect at small sizes.
• Rendering can change. On platforms that use subpixel antialiasing for text, introducing a shadow can move the glyphs onto grayscale antialiasing instead, so the same font looks a shade thinner than the text around it.
• It is painted per glyph, so it is not free. A large blur across a long paragraph costs real raster time on every repaint, and like box-shadow it is not a composited property. Animating it repaints the text each frame.
• Shadows can be clipped. The shadow does not affect layout, so a tight container with overflow: hidden will slice the glow off where the box ends.
• It is inherited. Always reset it explicitly on any descendant that should not have one, particularly icons, badges and text inside coloured buttons.

Questions about text shadows

Can I put a shadow behind text sitting on a photo?

Yes, and it is one of the few genuinely functional uses: a dark shadow with zero or small blur under light text over a busy image restores legibility. A semi-transparent scrim behind the text is still more reliable, and it keeps the contrast ratio predictable.

Why does my shadow look blurry on a retina screen?

Fractional offsets land between device pixels and the browser has to antialias the result. Use whole-pixel offsets, and prefer even values if you are targeting 2x displays.

How do I remove a shadow that came from a parent?

Set text-shadow: none on the element. The initial value is none, so assigning it explicitly stops the inherited value from applying to that element and its descendants.

Can a shadow make text bolder?

It can fake it. A shadow with zero offsets and a very small blur thickens the apparent stroke, which is why some interfaces use it to build up a faux-bold weight. Real weight comes from the font, and faux-bolding this way destroys hinting and looks soft at small sizes.

Do I need a vendor prefix?

No. Unprefixed text-shadow has been supported in every current browser for well over a decade, including multiple comma-separated shadows.