Tailwind CSS Drop Shadow

The drop-shadow-* utilities in Tailwind CSS apply a shadow effect using CSS filters instead of box-shadow. The key difference: drop shadows follow the actual shape of an element — including transparent areas in PNGs and SVGs — rather than just wrapping around the bounding box.

How to Add Tailwind Drop Shadow

Apply a drop shadow with the drop-shadow-{size} class:

• drop-shadow-none – No shadow.
• drop-shadow-sm – Small, subtle shadow.
• drop-shadow – Default medium shadow.
• drop-shadow-md – Medium shadow.
• drop-shadow-lg – Large shadow.
• drop-shadow-xl – Extra large shadow.
• drop-shadow-2xl – Biggest built-in shadow.

<img src="/logo.png" class="drop-shadow-lg" alt="Logo with shadow" />

Preview

All Drop Shadow Classes

| Class | CSS Filter | Best For | |-------|-----------|----------| | drop-shadow-none | drop-shadow(0 0 #0000) | Removing inherited shadows | | drop-shadow-sm | drop-shadow(0 1px 1px rgb(0 0 0/0.05)) | Subtle depth on small elements | | drop-shadow | drop-shadow(0 1px 2px rgb(0 0 0/0.1)) drop-shadow(0 1px 1px rgb(0 0 0/0.06)) | General purpose shadow | | drop-shadow-md | drop-shadow(0 4px 3px rgb(0 0 0/0.07)) drop-shadow(0 2px 2px rgb(0 0 0/0.06)) | Cards, buttons | | drop-shadow-lg | drop-shadow(0 10px 8px rgb(0 0 0/0.04)) drop-shadow(0 4px 3px rgb(0 0 0/0.1)) | Modal overlays, floating elements | | drop-shadow-xl | drop-shadow(0 20px 13px rgb(0 0 0/0.03)) drop-shadow(0 8px 5px rgb(0 0 0/0.08)) | Hero images, prominent features | | drop-shadow-2xl | drop-shadow(0 25px 25px rgb(0 0 0/0.15)) | Maximum depth, dramatic effect |

Drop Shadow vs Box Shadow

The main difference between drop-shadow-* and shadow-*:

• shadow-* (box-shadow): Applies to the element's bounding box. A rectangular shadow wraps the element regardless of its shape.
• drop-shadow-* (filter): Follows the actual rendered shape, including transparency in images and SVGs.

<!-- Box shadow wraps the bounding box -->
<svg class="shadow-lg">...</svg>

<!-- Drop shadow follows the SVG shape -->
<svg class="drop-shadow-lg">...</svg>

When to Use Drop Shadow

• Transparent PNG images (logos, icons, cutouts)
• SVG graphics with irregular shapes
• Elements with clip-path or mask
• Any non-rectangular element that needs a natural shadow

When to Use Box Shadow

• Rectangular cards, buttons, containers
• When you need shadow-inner (inset shadows)
• When you need colored shadows (shadow-blue-500)
• Better performance for simple rectangular elements

SVG Drop Shadow

Drop shadows are perfect for SVG icons:

<svg class="drop-shadow-md w-12 h-12 text-blue-500" fill="currentColor" viewBox="0 0 24 24">
  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>

Preview

Hover Drop Shadow

Add shadow on hover for interactive lift effects:

<div class="transition-all duration-300 drop-shadow-sm hover:drop-shadow-xl bg-white rounded-xl p-6">
  Hover to lift
</div>

Preview

Responsive Drop Shadow

Apply shadows at specific breakpoints:

<div class="drop-shadow-none md:drop-shadow-lg">
  Shadow only on medium screens and above
</div>

✏️ Arbitrary Value Usage

Use custom drop shadow values:

<div class="drop-shadow-[0_10px_20px_rgba(0,0,0,0.25)]">
  Custom drop shadow
</div>