Tailwind CSS Shadow Generator

Shadows in Tailwind CSS

Shadows are one of the most effective ways to create visual hierarchy — they tell users which elements are elevated (modals, cards, dropdowns) and which are flat (body content). Tailwind CSS includes a complete shadow system with 8 built-in sizes plus drop-shadow filter utilities.

Built-in Shadow Classes

Tailwind's box-shadow utilities:

Colored Shadows (Tailwind v3.1+)

One of the most powerful additions to Tailwind's shadow system is colored shadows:

<!-- Blue shadow on hover -->
<button class="bg-blue-500 shadow-lg shadow-blue-500/50 hover:shadow-blue-500/80">
  Click me
</button>

The shadow-{color}/{opacity} syntax lets you match shadow color to element color, creating that premium "glow" effect used on CTAs and gradient buttons.

Drop Shadow vs Box Shadow

Tailwind has two separate shadow systems:

shadow-* (box-shadow): Applied to the element's bounding box. Works on rectangles, ignores transparency.

drop-shadow-* (filter): Applied as a CSS filter — it respects the actual shape of the element, including transparent areas. Essential for icons, PNG images with transparent backgrounds, and SVGs.

<!-- Box shadow on a card -->
<div class="shadow-lg rounded-2xl">

<!-- Drop shadow on a logo SVG -->
<img class="drop-shadow-lg" src="/logo.svg" />

Creating Custom Shadows

For shadows beyond Tailwind's presets, use arbitrary values:

<div class="shadow-[0_20px_60px_rgba(0,0,0,0.3)]">

Or define custom shadows in your tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'brand': '0 4px 24px -4px rgba(9, 43, 85, 0.5)',
        'card-hover': '0 20px 40px -8px rgba(0, 0, 0, 0.2)',
      }
    }
  }
}

Shadow Best Practices

Use shadows to imply elevation, not decoration. Elements higher in the visual stack should have larger shadows. Reserve shadow-2xl for things that truly float above the page (modals, tooltips).

**Pair shadow size ...