Box shadow adds depth without extra DOM nodes. Layer small shadows instead of one large blur.
When to use
Cards, dropdowns, modals, and elevated surfaces. Remove or soften shadows in dark mode.
Class combinations
Utilities stack. These recipes do more together than any single class alone. Try them after you've explored the sandbox above.
Elevated surface
rounded-xl border bg-card shadow-smLight shadow + border reads cleaner than shadow alone. Layer sm shadows; avoid one heavy blur.
Focus ring substitute
ring-2 ring-ring/40 ring-offset-2 ring-offset-backgroundFor interactive states, rings often beat box-shadow, they don't clip at overflow:hidden.
Summary
- box-shadow layers multiple shadows: offset-x, offset-y, blur, spread, color, listed bottom to top in paint order.
- Soft, large blur with low opacity reads as elevation; tight offset with small blur reads as edge definition.
- Inset shadows simulate recessed surfaces. Useful for inputs and pressed states.
- Performance: prefer transform and opacity for motion; shadows are expensive to animate on large areas.
- Tailwind shadow-* presets encode sensible blur/spread combos. Use arbitrary values for brand-specific elevation.