Box Shadow

Utilities for controlling the box shadow of an element.

Tailwind CSS

Class	Properties
shadow-none	box-shadow: none;
shadow-inner	box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
shadow	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
shadow-sm	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
shadow-md	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
shadow-lg	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
shadow-xl	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
shadow-2xl	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
shadow-top-2xs	box-shadow: 0px -1px 2px 0px rgb(0 0 0 / 0.06);
shadow-top-xs	box-shadow: 0px -2px 2px 0px rgb(0 0 0 / 0.07);
shadow-top-sm	box-shadow: 0px -2px 4px 0px rgb(0 0 0 / 0.08);
shadow-top-md	box-shadow: 0px -3px 4px 0px rgb(0 0 0 / 0.08);
shadow-top-lg	box-shadow: 0px -4px 5px 0px rgb(0 0 0 / 0.08);
shadow-top-xl	box-shadow: 0px -6px 10px 0px rgb(0 0 0 / 0.1);
shadow-top-2xl	box-shadow: 0px -8px 10px 0px rgb(0 0 0 / 0.1);
shadow-top-3xl	box-shadow: 0px -12px 17px 0px rgb(0 0 0 / 0.1);
shadow-top-4xl	box-shadow: 0px -16px 24px 0px rgb(0 0 0 / 0.11);
shadow-right-2xs	box-shadow: 1px 0px 2px 0px rgb(0 0 0 / 0.06);
shadow-right-xs	box-shadow: 2px 0px 2px 0px rgb(0 0 0 / 0.07);
shadow-right-sm	box-shadow: 2px 0px 4px 0px rgb(0 0 0 / 0.08);
shadow-right-md	box-shadow: 3px 0px 4px 0px rgb(0 0 0 / 0.08);
shadow-right-lg	box-shadow: 4px 0px 5px 0px rgb(0 0 0 / 0.08);
shadow-right-xl	box-shadow: 6px 0px 10px 0px rgb(0 0 0 / 0.1);
shadow-right-2xl	box-shadow: 8px 0px 10px 0px rgb(0 0 0 / 0.1);
shadow-right-3xl	box-shadow: 12px 0px 17px 0px rgb(0 0 0 / 0.1);
shadow-right-4xl	box-shadow: 16px 0px 24px 0px rgb(0 0 0 / 0.11);
shadow-bottom-2xs	box-shadow: 0px 1px 2px 0px rgb(0 0 0 / 0.06);
shadow-bottom-xs	box-shadow: 0px 2px 2px 0px rgb(0 0 0 / 0.07);
shadow-bottom-sm	box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 0.08);
shadow-bottom-md	box-shadow: 0px 3px 4px 0px rgb(0 0 0 / 0.08);
shadow-bottom-lg	box-shadow: 0px 4px 5px 0px rgb(0 0 0 / 0.08);
shadow-bottom-xl	box-shadow: 0px 6px 10px 0px rgb(0 0 0 / 0.1);
shadow-bottom-2xl	box-shadow: 0px 8px 10px 0px rgb(0 0 0 / 0.1);
shadow-bottom-3xl	box-shadow: 0px 12px 17px 0px rgb(0 0 0 / 0.1);
shadow-bottom-4xl	box-shadow: 0px 16px 24px 0px rgb(0 0 0 / 0.11);
shadow-left-2xs	box-shadow: -1px 0px 2px 0px rgb(0 0 0 / 0.06);
shadow-left-xs	box-shadow: -2px 0px 2px 0px rgb(0 0 0 / 0.07);
shadow-left-sm	box-shadow: -2px 0px 4px 0px rgb(0 0 0 / 0.08);
shadow-left-md	box-shadow: -3px 0px 4px 0px rgb(0 0 0 / 0.08);
shadow-left-lg	box-shadow: -4px 0px 5px 0px rgb(0 0 0 / 0.08);
shadow-left-xl	box-shadow: -6px 0px 10px 0px rgb(0 0 0 / 0.1);
shadow-left-2xl	box-shadow: -8px 0px 10px 0px rgb(0 0 0 / 0.1);
shadow-left-3xl	box-shadow: -12px 0px 17px 0px rgb(0 0 0 / 0.1);
shadow-left-4xl	box-shadow: -16px 0px 24px 0px rgb(0 0 0 / 0.11);

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>

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>

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>

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

<div class="shadow-top-2xs ..."></div>
<div class="shadow-top-xs ..."></div>
<div class="shadow-top-sm ..."></div>
<div class="shadow-top-md ..."></div>
<div class="shadow-top-lg ..."></div>
<div class="shadow-top-xl ..."></div>
<div class="shadow-top-2xl ..."></div>
<div class="shadow-top-3xl ..."></div>
<div class="shadow-top-4xl ..."></div>

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

<div class="shadow-right-2xs ..."></div>
<div class="shadow-right-xs ..."></div>
<div class="shadow-right-sm ..."></div>
<div class="shadow-right-md ..."></div>
<div class="shadow-right-lg ..."></div>
<div class="shadow-right-xl ..."></div>
<div class="shadow-right-2xl ..."></div>
<div class="shadow-right-3xl ..."></div>
<div class="shadow-right-4xl ..."></div>

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

<div class="shadow-bottom-2xs ..."></div>
<div class="shadow-bottom-xs ..."></div>
<div class="shadow-bottom-sm ..."></div>
<div class="shadow-bottom-md ..."></div>
<div class="shadow-bottom-lg ..."></div>
<div class="shadow-bottom-xl ..."></div>
<div class="shadow-bottom-2xl ..."></div>
<div class="shadow-bottom-3xl ..."></div>
<div class="shadow-bottom-4xl ..."></div>

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

<div class="shadow-left-2xs ..."></div>
<div class="shadow-left-xs ..."></div>
<div class="shadow-left-sm ..."></div>
<div class="shadow-left-md ..."></div>
<div class="shadow-left-lg ..."></div>
<div class="shadow-left-xl ..."></div>
<div class="shadow-left-2xl ..."></div>
<div class="shadow-left-3xl ..."></div>
<div class="shadow-left-4xl ..."></div>