How to Use Box Shadow in Tailwind CSS

In Tailwind CSS, you can apply box shadows using the shadow utilities. In this section, we will explore how to use box shadows in Tailwind CSS. We will cover shadow sizes, custom shadows, Tailwind shadow sizes, shadow buttons, and provide an example of a card with a shadow using Tailwind CSS.

Tailwind CSS Box Shadow Example

Tailwind shadow utilities include sizes such as shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, and shadow-2xl.

<div class="p-6 shadow-md">Shadow-md</div>
<div class="p-6 shadow-lg">Shadow-lg</div>
<div class="p-6 shadow-xl">Shadow-xl</div>
<div class="p-6 shadow-2xl">Shadow-2xl</div>
shadow box size

Use the Tailwind CSS class shadow-inner to apply an inner box shadow.

<div class="p-6 shadow-inner">shadow-inner</div>
inner shadow

.shadow-none use for removing shadow effect.

<div class="p-4 shadow-none">shadow-none</div>

tailwind using shadow with hover class.

<div class="p-4 shadow hover:shadow-lg">Shadow hover</div>

Tailwind CSS shadow button with shadow effect.

<button class="px-4 py-2 rounded shadow bg-blue-400 hover:shadow-lg text-blue-100">Button</button>
shadow button

Create responsive shadow box.

<div class="p-4 shadow lg:shadow-lg md:shadow-md">Responsive Shadow</div>

Tailwind CSS custom shadow arbitrary values.

<div class="p-4 shadow-[0px_0px_3px_rgba(3,102,214,0.3)]">Custom Shadow</div>
<div class="p-4 shadow-[0px_22px_70px_4px_rgba(0,0,0,0.56)]">Custom Shadow</div>
custom box shadow

Tailwind CSS card with shadow.

<div class="w-full rounded-lg border border-gray-200 bg-white p-6 shadow-md lg:max-w-md">
    <h2 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">Tailwind CSS Card with Shadow</h2>
    <p class="mb-3 font-normal text-gray-700">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quasi autem
        accusamus odio minima fugiat, consectetur recusandae assumenda.</p>
    <a href="#"
        class="inline-flex items-center rounded-lg bg-purple-700 px-3 py-2 text-center text-sm font-medium text-white hover:bg-purple-800 focus:outline-none">
        Read more </a>
</div>
 card with shadow