Box-Shadow vs Text-Shadow vs Filter Drop-Shadow: Which to Use When

CSS actually has three different shadow-producing properties, and each one is genuinely the right choice in different situations.

box-shadow

Applies a shadow around an element's rectangular box (or rounded box, if border-radius is set) — the shadow follows the element's border-box shape, including rounded corners. This is the right choice for cards, buttons, panels, and any standard rectangular or pill-shaped UI element.

text-shadow

Applies a shadow specifically to text glyphs, following the shape of each character rather than a bounding box. It doesn't support the spread value or the inset keyword that box-shadow has. Use this for legibility over busy backgrounds, letterpress-style effects, or glowing text.

filter: drop-shadow()

Unlike box-shadow, which always follows the rectangular border-box, drop-shadow() follows the actual visible shape of the element's content — including transparent areas in a PNG, or an irregular shape defined with clip-path. This makes it the right choice for logos, icons, or cutout images where you want the shadow to trace the actual visible silhouette, not a rectangle around it.

A Performance Consideration

box-shadow is composited on the GPU in modern browsers and is generally the faster, cheaper option for standard rectangular elements. filter: drop-shadow() is typically more expensive to render since it has to evaluate the actual alpha shape — reasonable for a static logo, but worth avoiding on elements animated frequently or in large numbers.

Quick Decision Guide

• Rectangular or rounded UI element (card, button, panel): box-shadow.
• Text specifically: text-shadow.
• Irregular shape or transparent PNG: filter: drop-shadow().