Back to Blog

How to Create Box Shadows in Tailwind CSS: The Complete Guide

8 min read

Box shadows are an essential design element in modern web development. They add depth to elements and help create visual hierarchies. In this guide, I'll show you how to create professional shadows with Tailwind CSS.

Standard Box Shadow Classes in Tailwind

Tailwind CSS provides several predefined shadow classes that you can use right away:

<!-- No shadow -->
<div class="shadow-none">...</div>

<!-- Small shadows -->
<div class="shadow-sm">...</div>
<div class="shadow">...</div>

<!-- Medium shadows -->
<div class="shadow-md">...</div>
<div class="shadow-lg">...</div>

<!-- Large shadows -->
<div class="shadow-xl">...</div>
<div class="shadow-2xl">...</div>

<!-- Inner shadow -->
<div class="shadow-inner">...</div>

When to Use Which Shadow?

  • shadow-sm: Subtle elevation, ideal for cards and buttons
  • shadow: Standard shadow for most UI elements
  • shadow-md: Good choice for floating elements
  • shadow-lg: For modal dialogs and dropdown menus
  • shadow-xl / shadow-2xl: For prominent call-to-action elements
  • shadow-inner: For pressed/inset effects, e.g., on input fields

Shadow Colors in Tailwind CSS

Since Tailwind CSS 3.0, you can customize the color of your shadows. This works with the shadow-{color} classes:

<div class="shadow-lg shadow-blue-500/50">
  Blue shadow with 50% opacity
</div>

<div class="shadow-xl shadow-purple-600/30">
  Purple shadow with 30% opacity
</div>

<div class="shadow-md shadow-gray-900/20">
  Dark shadow with 20% opacity
</div>

The value after the slash (/50, /30, etc.) determines the opacity of the shadow.

Custom Shadows with Arbitrary Values

Sometimes the standard classes aren't enough. With Tailwind's arbitrary values, you can create completely custom shadows:

<div class="shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1)]">
  Custom shadow
</div>

<div class="shadow-[0_10px_40px_rgba(147,51,234,0.3)]">
  Large purple glow effect
</div>

<div class="shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]">
  Custom inner shadow
</div>

Understanding the Syntax

The CSS box-shadow property has the following syntax:

box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;
  • inset (optional): Makes the shadow an inner shadow
  • offset-x: Horizontal offset (positive values move right)
  • offset-y: Vertical offset (positive values move down)
  • blur-radius: How much the shadow is blurred
  • spread-radius: How far the shadow spreads
  • color: The color of the shadow

Combining Multiple Shadows

For more realistic or interesting effects, you can combine multiple shadows:

<div class="shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]">
  Two shadows combined
</div>

This technique is often used to create more natural shadows that mimic real light behavior.

Shadows in Tailwind CSS 4

In Tailwind CSS 4, the shadow system has been further improved. You can now work even more easily with CSS variables and modern techniques:

<!-- Tailwind 4 syntax with CSS variables -->
<div class="shadow-[0_4px_14px_var(--shadow-color)]" 
     style="--shadow-color: rgba(147, 51, 234, 0.25);">
  Dynamic shadow
</div>

Responsive and State-Based Shadows

Tailwind allows you to adjust shadows based on breakpoints or states:

<!-- Shadow only on larger screens -->
<div class="shadow-none md:shadow-lg">...</div>

<!-- Increase shadow on hover -->
<div class="shadow-md hover:shadow-xl transition-shadow">...</div>

<!-- Shadow on focus -->
<div class="shadow-sm focus:shadow-lg focus:shadow-blue-500/25">...</div>

Practical Examples

Modern Card with Soft Shadow

<div class="bg-white rounded-xl shadow-[0_4px_20px_rgba(0,0,0,0.08)] p-6">
  <h3 class="font-semibold text-lg">Heading</h3>
  <p class="text-gray-600">Card content here...</p>
</div>

Button with Glow Effect

<button class="bg-purple-600 text-white px-6 py-3 rounded-lg 
               shadow-[0_4px_14px_rgba(147,51,234,0.4)]
               hover:shadow-[0_6px_20px_rgba(147,51,234,0.5)]
               transition-shadow">
  Click me
</button>

Neumorphism Effect

<div class="bg-gray-100 rounded-2xl p-8
            shadow-[8px_8px_16px_#d1d1d1,-8px_-8px_16px_#ffffff]">
  Neumorphism Design
</div>

Tips for Better Shadows

  1. Less is more: Shadows that are too strong can quickly look cluttered
  2. Consistency: Use similar shadow styles throughout your project
  3. Color adaptation: Colored shadows look more modern than pure black
  4. Use transitions: Animate shadows with transition-shadow for interactive effects
  5. Consider dark mode: Shadows need to be adjusted for dark mode

Conclusion

Tailwind CSS offers a powerful system for box shadows - from simple utility classes to completely custom values. With arbitrary values, you have full control over every aspect of your shadows.

The Easy Way: CSS Gems Box Shadow Generator

Don't want to calculate values manually every time? No problem! With our free Box Shadow Generator, you can create shadows visually and copy the finished code directly.

Features:

  • Real-time visual preview
  • Support for multiple shadow layers
  • Export as CSS or Tailwind CSS class
  • Customizable colors with opacity
  • Inset shadow support

👉 Try the Box Shadow Generator

Create perfect shadows for your next project in seconds!