Box shadow

Utilities for controlling the box shadow of an element


Class reference

ClassProperties
*--tw-shadow: 0 0 #0000;
shadow--tw-shadow: 0px 4px 8px rgba(123, 116, 121, 0.16), 0px 0px 2px rgba(30, 0, 51, 0.04); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-xs--tw-shadow: 0px 0.5px 2px rgba(123, 116, 121, 0.16), 0px 0px 1px rgba(30, 0, 51, 0.08); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-sm--tw-shadow: 0px 2px 4px rgba(123, 116, 121, 0.16), 0px 0px 1px rgba(30, 0, 51, 0.04); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-md--tw-shadow: 0px 4px 8px rgba(123, 116, 121, 0.16), 0px 0px 2px rgba(30, 0, 51, 0.04); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-lg--tw-shadow: 0px 8px 16px rgba(123, 116, 121, 0.16), 0px 2px 4px rgba(30, 0, 51, 0.04); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-xl--tw-shadow: 0px 16px 24px rgba(123, 116, 121, 0.16), 0px 2px 8px rgba(30, 0, 51, 0.04); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-2xl--tw-shadow: 0px 20px 32px rgba(123, 116, 121, 0.24), 0px 2px 8px rgba(30, 0, 51, 0.08); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-inner--tw-shadow: inset 0px 0.5px 4px rgba(30, 0, 51, 0.32); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-inner-sm--tw-shadow: inset 0px 0.25px 1.25px rgba(30, 0, 51, 0.1); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-dark-xs--tw-shadow: 0px 0.5px 2px rgba(0, 0, 0, 0.32), 0px 0px 1px rgba(40, 41, 61, 0.08); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-dark-sm--tw-shadow: 0px 2px 4px rgba(0, 0, 0, 0.32), 0px 0px 1px rgba(0, 0, 0, 0.04); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-dark-md--tw-shadow: 0px 4px 8px rgba(0, 0, 0, 0.32), 0px 0px 2px rgba(0, 0, 0, 0.04); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-dark-lg--tw-shadow: 0px 8px 16px rgba(0, 0, 0, 0.32), 0px 2px 4px rgba(0, 0, 0, 0.04); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-dark-xl--tw-shadow: 0px 16px 24px rgba(0, 0, 0, 0.32), 0px 2px 8px rgba(0, 0, 0, 0.04); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-dark-2xl--tw-shadow: 0px 20px 32px rgba(0, 0, 0, 0.32), 0px 2px 8px rgba(0, 0, 0, 0.08); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-dark-inner--tw-shadow: inset 0px 0.5px 4px rgba(0, 0, 0, 0.32); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-dark-inner-sm--tw-shadow: inset 0px 0.25px 1.25px rgba(0, 0, 0, 0.2); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-none--tw-shadow: none; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

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

shadow
shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-2xl
shadow-inner
shadow-inner-sm
shadow-none
shadow-dark-xs
shadow-dark-sm
shadow-dark-md
shadow-dark-lg
shadow-dark-xl
shadow-dark-2xl
shadow-dark-inner
shadow-dark-inner-sm
<!-- 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.

.shadow-inner
<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.

.shadow-none
<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.