Effects

Box Shadow

Utilities for controlling the box shadow of an element.

Quick reference

Basic usage

Adding an outer shadow

Use the shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, or shadow-2xl utilities to apply different sized outer box shadows to an element.

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

Adding an inner shadow

Use the shadow-inner utility to apply a subtle inset box shadow to an element. This can be useful for things like form controls or wells.

<div class="shadow-inner ..."></div>

Removing the shadow

Use shadow-none to remove an existing box shadow from an element. This is most commonly used to remove a shadow that was applied at a smaller breakpoint.

<div class="shadow-none ..."></div>

Applying conditionally

Hover, focus, and other states

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

<div class="shadow hover:shadow-lg">
  <!-- ... -->
</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:shadow-lg to apply the shadow-lg utility at only medium screen sizes and above.

<div class="shadow md:shadow-lg">
  <!-- ... -->
</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 provides six drop shadow utilities, one inner shadow utility, and a utility for removing existing shadows. You can customize these values by editing theme.boxShadow or theme.extend.boxShadow in your tailwind.config.js file.

If a DEFAULT shadow is provided, it will be used for the non-suffixed shadow utility. Any other keys will be used as suffixes, for example the key '2' will create a corresponding shadow-2 utility.

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
      }
    }
  }
}

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

Arbitrary values

If you need to use a one-off box-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="shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]">
  <!-- ... -->
</div>

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