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-inner class for apply shadow inner box.
<div class="p-6 shadow-inner">shadow-inner</div>
.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>
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 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>
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 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 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