Box Shadow

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 className="**shadow-md** ..."></div>
<div className="**shadow-lg** ..."></div>
<div className="**shadow-xl** ..."></div>
<div className="**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 className="**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 className="**shadow-none** ..."></div>