Box shadow

Class reference

# Outer shadow

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

<!-- Light -->
<div class="shadow"></div>
<div class="shadow-xs"></div>
<div class="shadow-sm"></div>
<div class="shadow-md"></div>
<div class="shadow-lg"></div>
<div class="shadow-xl"></div>
<div class="shadow-2xl"></div>
<div class="shadow-inner"></div>
<div class="shadow-inner-sm"></div>
<div class="shadow-none"></div>
<!-- Dark -->
<div class="shadow-dark-xs"></div>
<div class="shadow-dark-sm"></div>
<div class="shadow-dark-md"></div>
<div class="shadow-dark-lg"></div>
<div class="shadow-dark-xl"></div>
<div class="shadow-dark-2xl"></div>
<div class="shadow-dark-inner"></div>
<div class="shadow-dark-inner-sm"></div>

# 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>

# No 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>

# Responsive

To control the shadow of an element at a specific breakpoint, add a {screen}: prefix to any existing shadow utility. 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>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.