Tailwind Box Shadow Utilities

What Are Box Shadow Utilities?

shadow-* utilities map to the CSS box-shadow property, offering a scale from very subtle (shadow-sm) to dramatic (shadow-2xl), each a carefully tuned combination of offset, blur, and spread.

Consistent shadow usage communicates elevation hierarchy: elements that appear "closer" to the user, like open dropdowns and modals, typically use larger shadow values than resting page elements like cards.

<div class="rounded-lg bg-white p-6 shadow-md">
  A card with a medium elevation shadow.
</div>

shadow-md gives the card a soft, subtle lift off the page background.

Box Shadow Syntax

class="shadow-sm | shadow | shadow-md | shadow-lg | shadow-xl | shadow-2xl"
class="shadow-none"
class="shadow-{color}-{shade}"

• shadow-sm through shadow-2xl scale from subtle to dramatic elevation.
• shadow-none removes any shadow.
• shadow-color-* (Tailwind v3.x+) tints the shadow color instead of the default neutral gray.
• inset (used with shadow-inner) creates an inward shadow instead of an outward one.

Box Shadow Cheatsheet

The full shadow scale and common elevation use cases.

Using Shadows to Build Elevation Hierarchy

Assign larger shadow values to elements that visually "float" above others. Resting cards might use shadow-sm or shadow-md, while dropdown menus and modals use shadow-lg, shadow-xl, or shadow-2xl to feel like they're on a higher layer.

Hover Shadow Transitions

Increasing a shadow on hover, combined with a transition-shadow, gives cards and buttons a satisfying sense of interactivity, as if they're lifting toward the user.

<div class="rounded-lg bg-white p-6 shadow-md transition-shadow hover:shadow-xl">
  Hover to see the elevation increase.
</div>

Colored Shadows

Pairing a shadow utility with a color and opacity modifier creates a soft, tinted glow effect, popular for buttons and call-to-action elements that need extra visual emphasis.

<button class="rounded-lg bg-indigo-600 px-5 py-2.5 text-white shadow-lg shadow-indigo-500/50">
  Glowing Button
</button>

Common Mistakes

• Using very large shadow values (shadow-2xl) on ordinary resting elements like list items, making the page feel visually noisy.
• Forgetting transition-shadow when animating a hover shadow change, causing the shadow to snap abruptly.
• Applying shadows inconsistently across similar components, undermining a clear elevation hierarchy.
• Not testing shadow visibility on dark backgrounds, where default gray shadows can become nearly invisible.
• Using shadow-inner when a regular outward shadow was actually intended.

Key Takeaways

• Box shadow utilities scale from shadow-sm to shadow-2xl, matching a consistent elevation system.
• Larger shadow values should be reserved for elements that visually float above the page, like modals and dropdowns.
• transition-shadow combined with a hover shadow class creates smooth elevation animations.
• Colored shadow modifiers create tinted glow effects for emphasis on buttons and CTAs.
• Shadows should follow a consistent hierarchy across similar components for visual coherence.