How text-shadow Works

The text-shadow property adds shadow effects that follow the outline of each text character. It accepts horizontal offset, vertical offset, blur radius and color. You can stack multiple shadows separated by commas.

CSS
h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Multiple layers for neon effect */
h1.neon {
  text-shadow:
    0 0 10px #7c6fff,
    0 0 20px #7c6fff,
    0 0 40px #7c6fff;
}

Text-shadow only affects text content. It does not apply to borders, backgrounds, images or pseudo-elements within the same element.

How filter: drop-shadow() Works

The drop-shadow() filter creates a shadow of the entire element's alpha channel — meaning it follows the visual shape of everything visible, including text, images, borders and transparent areas.

CSS
h1 {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}

Unlike text-shadow, drop-shadow respects the element's opacity and produces a shadow that matches the composite visual output. This makes it ideal for PNG images with transparent backgrounds, SVG icons and complex elements.

Key Differences

Scope: text-shadow only affects text glyphs. drop-shadow affects the entire element's painted area including images, borders and decorations.

Multiple layers: text-shadow supports multiple comma-separated shadows. drop-shadow only allows one shadow per filter function (though you can chain multiple filter functions).

Spread radius: text-shadow does not support a spread value. drop-shadow also does not support spread — only box-shadow supports spread.

Performance: text-shadow is generally faster because it only processes text. drop-shadow requires the browser to composite the element first, then generate the shadow from its alpha mask. For large elements or animations, text-shadow will be lighter on the GPU.

Inset shadows: Neither property supports inset shadows. Only box-shadow has an inset option.

When to Use Each

Use text-shadow when you want to shadow only the text characters — neon glow effects, letterpress styles, retro 3D text, or subtle reading legibility improvements on background images. Our Text Shadow Generator makes this easy to prototype.

Use drop-shadow when you need to shadow an irregular shape — a PNG logo, an SVG icon, a CSS shape created with clip-path, or any element where box-shadow's rectangular shape doesn't fit.

Use box-shadow when you need spread control, inset shadows or rectangular element shadows for cards and buttons. Try our Box Shadow Generator.

Browser Support

Both text-shadow and filter: drop-shadow() are supported in all modern browsers. text-shadow has been supported since 2011. drop-shadow() has been supported since Chrome 18, Firefox 35 and Safari 6. No vendor prefixes are needed for either property in current projects.