Tailwind CSS Box Shadow

Tailwind CSS Box Shadow

CSS has box shadow property which is used to add shadows around the frame of an element.

By using Tailwind CSS, you may use the utility classes for controlling the box shadow of an element.

Classes for box shadow in Tailwind CSS

The following classes are available in Tailwind for box-shadow:

• shadow-sm
• shadow
• shadow-md
• shadow-lg
• shadow-xl
• shadow-2xl
• shadow-inner
• shadow-none

The first six shadow utility classes are for outer shadow. Whereas .shadow-inner is for inner shadow (as the name reflects).

The last, shadow-none is for removing existing shadows.

The section below shows using these classes for creating box shadow in HTML elements.

An example of using outer shadow utilities

In the example below, we created a box of 200px width and 150px height. Then we applied various Tailwind classes of box shadow to that box element. We used all outer shadow classes for that:

Have a look.

See online demo and code

Code

Output:

An example of applying inner shadow (shadow-inner) utility

In the example below, we used the only inner shadow utility class for the same sized box.

See online demo and code

Code:

Output:

Adding shadow in hover state example

As such, Tailwind includes modifiers for pseudo-classes including hover state. For the hover pseudo-class, use the hover modifier.

You may also use the shadow classes in the hover state.

In the example below, we added a normal outer class (shadow) to three boxes.

In each box, we added a different utility for the shadow box as you hover the mouse over that box element. In the first box, we applied:

hover:shadow-lg

In the second box:

hover:shadow-xl

In the third box:

hover:shadow-2xl

See the code and output by clicking the link below. Hover the mouse over any box and see the shadow in place.

See online demo and code

Code:

Output:

Colorizing the outer shadow example

In order to use some other color than the default (as in the above examples), you may use the utilities for controlling the box shadow color.

A few classes are:

• shadow-black
• shadow-white
• shadow-slate-50
• shadow-slate-100
• —
• shadow-slate-950
• shadow-zinc-50
• shadow-zinc-100
• —
• shadow-zinc-950
• shadow-red-50
• shadow-red-100
• —
• shadow-red-100

In the demo below, we have used a few of these classes in our box shadows. Have a look:

See online demo and code

Code:

Output:

See the complete available list here.

Applying shadow to button element

In the example below, we created three buttons by using the utility classes of Tailwind.

There, we also applied box shadow classes to the button elements. Along with using different box shadow utilities for size, we also used shadow colors.

See online demo and code

Code:

Output: