Tailwind box Shadow

The tailwind box shadow utility class allows you to add shadows to elements, giving them a three-dimensional effect and enhancing their visual appearance. Useful for giving depth, separating UI layers, and improving visual hierarchy.

How to apply Tailwind Box Shadow

To apply a tailwind box shadow to an element, you can use the shadow-{value} utility class, where {value} represents the desired shadow style. Here are the available options:

• shadow-sm: Applies a small shadow.
• shadow: Applies a medium shadow (default).
• shadow-md: Applies a medium shadow.
• shadow-lg: Applies a large shadow.
• shadow-xl: Applies an extra-large shadow.
• shadow-2xl: Applies a 2x extra-large shadow.
• shadow-inner: Applies an inset shadow.

<div class="flex">
  <div class="shadow-md">Item 1</div>
  <div class="shadow-xl">Item 2</div>
  <div class="shadow-2xl">Item 3</div>
</div>

Preview

Responsive Tailwind Box Shadow

Tailwind CSS allows you to apply box shadow classes responsively at different breakpoints. To use responsive tailwind box shadow classes, you can append the breakpoint prefix to the utility class. For example, md:shadow-lg applies a large shadow starting from the medium breakpoint and above.

<div class="shadow-lg md:shadow-xl">
  <!-- Content here -->
</div>

Preview

In the above example, the shadow applied to the <div> element is large by default (shadow-lg), but starting from the medium breakpoint and above, it changes to an extra-large shadow (md:shadow-xl).

Arbitrary Value Usage

You’re not limited to Tailwind’s predefined shadow utilities like shadow-md or shadow-xl. With arbitrary value support, you can use custom box-shadow values inline using square brackets.

<div class="shadow-[0_0_15px_3px_rgba(0,255,0,0.5)] p-6 rounded-lg bg-white">
  Custom green glow
</div>

Preview

Hover & Focus Interaction

You can apply shadows dynamically on interaction states:

<!-- Shadow appears on hover -->
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:shadow-lg">
  Hover Me
</button>

Preview

Tailwind also includes focus:shadow-*, hover:shadow-*, and you can combine them with transitions for smooth animations.

Customization in tailwind.config.js

You can define custom shadows under theme.extend.boxShadow:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'card': '0_2px_12px_rgba(0,0,0,0.1)',
        'deep': '0_8px_30px_rgba(0,0,0,0.2)',
      },
    },
  },
}

Usage:

<div class="flex justify-between items-center">
  <div class="shadow-card bg-white p-2 ....">Custom Card Shadow</div>
<div class="shadow-deep bg-white p-2...">Deep Shadow UI</div>
</div>

Preview

🌟 Real UI Component Examples

Product Card with Interactive Shadow

<div class="max-w-sm bg-white rounded-xl overflow-hidden shadow hover:shadow-xl transition-shadow duration-300">
  <img src="https://via.placeholder.com/400x200" alt="Product" class="w-full">
  <div class="p-4">
    <h2 class="text-lg font-semibold">Smart Watch</h2>
    <p class="text-gray-500 text-sm mt-1">Fitness tracking, alerts, and more.</p>
    <button class="mt-4 bg-blue-600 text-white px-4 py-2 rounded hover:shadow-md">
      Buy Now
    </button>
  </div>
</div>

Preview

Smart Watch

Fitness tracking, alerts, and more.

Buy Now

📝 Example: Notification Toast with Inner Shadow

<div class="bg-green-500 shadow-inner border rounded p-4 max-w-sm">
  <p class="text-sm text-white font-bold">💡 Tip: Use `ctrl + s` to save instantly.</p>
</div>

Preview

✅ Best Practices

• Use subtle shadows (shadow-sm, shadow) for flat designs.

• Reserve large shadows (shadow-xl, 2xl) for modals, overlays, or floating panels.

• Avoid overusing shadows — too many can feel heavy or chaotic.

• Combine with border, padding, and contrast to enhance clarity.

• Use transition-shadow for smoother interactivity.

Tailwind Box-shadow Class Table

✨ What's Next?

Now that you’ve mastered Tailwind Box Shadow, try experimenting with:

• Tailwind css Fill

• Tailwind CSS Display

Windframe Tailwind blocks

Content