Question

Utilities for applying drop-shadow filters to an element.

Quick reference

Class	Properties
drop-shadow-sm	filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
drop-shadow	filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
drop-shadow-md	filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
drop-shadow-lg	filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
drop-shadow-xl	filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
drop-shadow-2xl	filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
drop-shadow-none	filter: drop-shadow(0 0 #0000);

Basic usage

Adding a drop shadow

Use the drop-shadow-* utilities to add a drop shadow to an element.

drop-shadow-md

drop-shadow-lg

drop-shadow-xl

drop-shadow-2xl

<div class="drop-shadow-md ...">
  <!-- ... -->
</div>
<div class="drop-shadow-lg ...">
  <!-- ... -->
</div>
<div class="drop-shadow-xl ...">
  <!-- ... -->
</div>
<div class="drop-shadow-2xl ...">
  <!-- ... -->
</div>

This is useful for applying shadows to irregular shapes, like text and SVG elements. For applying shadows to regular elements, you probably want to use box shadow instead.

Removing filters

To remove all of the filters on an element at once, use the filter-none utility:

<div class="blur-md invert drop-shadow-xl md:filter-none">
  <!-- ... -->
</div>

This can be useful when you want to remove filters conditionally, such as on hover or at a particular breakpoint.

---

Applying conditionally

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:drop-shadow-xl to only apply the drop-shadow-xl utility on hover.

<div class="drop-shadow-md hover:drop-shadow-xl">
  <!-- ... -->
</div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:drop-shadow-xl to apply the drop-shadow-xl utility at only medium screen sizes and above.

<div class="drop-shadow-md md:drop-shadow-xl">
  <!-- ... -->
</div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.

---

Using custom values

Customizing your theme

By default, Tailwind includes a handful of general purpose dropShadow utilities. You can customize these values by editing theme.dropShadow or theme.extend.dropShadow in your tailwind.config.js file.

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      dropShadow: {
        '3xl': '0 35px 35px rgba(0, 0, 0, 0.25)',
        '4xl': [
            '0 35px 35px rgba(0, 0, 0, 0.25)',
            '0 45px 65px rgba(0, 0, 0, 0.15)'
        ]
      }
    }
  }
}

Learn more about customizing the default theme in the theme customization documentation.

Arbitrary values

If you need to use a one-off drop-shadow value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

<div class="drop-shadow-[0_35px_35px_rgba(0,0,0,0.25)]">
  <!-- ... -->
</div>

Learn more about arbitrary value support in the arbitrary values documentation.