Tailwind CSS Box Shadow Example

In this section we will see how to use box shadow in tailwind css. we will see, shadow sizes, custom shadow , tailwind shadow sizes, shadow button, card with shadow example with Tailwind CSS 3.

Tailwind CSS Shadow Color Example

Example 1

Tailwind shadow utilities size shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, or 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>

tailwind shadow box size

tailwind .shadow-inner class for apply shadow inner box.

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

tailwind inner shadow

.shadow-none use for removing shadow effect.

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

Example 2

tailwind using shadow with hover class.

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

Tailwind CSS shadow button with shadow effect.

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

tailwind shadow button

Example 3

Using responsive shadow box.

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

Tailwind CSS custom shadow arbitrary values

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

tailwind custom box shadow

Tailwind CSS card with shadow.

<div class="w-full p-6 bg-white border border-gray-200 rounded-lg 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 px-3 py-2 text-sm font-medium text-center text-white bg-purple-700 rounded-lg hover:bg-purple-800 focus:outline-none">
        Read more
    </a>
</div>

tailwind card with shadow

See Also

Tailwind CSS Free Digital Agency Landing Page

TailFood – Free Tailwind CSS Restaurant Template

Tailwind CSS Real Estate Template

Tailwind CSS Simple Responsive Landing Page Template

Tailwind CSS Simple Verification Email Template

Read Also

Tailwind CSS 3 FAQ Accordion UI Example

Tailwind CSS 3 Alert Message Example

Tailwind CSS 3 Avatars Example

Tailwind CSS 3 Badges Example

Tailwind CSS 3 Breadcrumb Example

Tailwind CSS v3 Button Examples

Tailwind CSS Gradient Button Example

Tailwind CSS 3D Button Example

Tailwind CSS Loading Button Example

Tailwind CSS v3 Cards Examples

Tailwind CSS Checkbox Form Examples

Tailwind CSS Dropdowns (Menu) on Hover Example

Tailwind CSS Multiselect Dropdown Example

How to use dark mode toggle switch in Tailwind CSS 3

How to use @apply directive in Tailwind CSS

Tailwind CSS sticky header & fixed navbar example

Tailwind CSS Navbar UI Example

Tailwind CSS 3 Login Page UI Example

Tailwind CSS Login Modal Example

Tailwind CSS Search Examples

Tailwind CSS 3 Overlay Image Example

Tailwind CSS Thank You Page Example

Tailwind CSS Timeline UI Example

Tailwind CSS Responsive Footer Section Example

Tailwind CSS Background Image Header Example