Tailwind CSS Box Shadow — Complete Guide to Shadow Utilities

Tailwind CSS provides a set of utility classes that let you apply box shadows to any element without writing custom CSS. The shadow utilities range from barely-visible shadow-sm to dramatic shadow-2xl, and they cover inset shadows and shadow removal as well. This guide explains every default shadow class, shows you how to extend Tailwind with custom shadow values, and demonstrates how freeboxshadow.app helps you create precise shadow values for your Tailwind projects.

What Are the Default Tailwind Box Shadow Classes?

Tailwind ships with eight box shadow utilities out of the box. Each class maps to one or more CSS box-shadow values, creating shadows that progressively increase in size, blur, and intensity.

The naming convention is intuitive: shadow-sm is the smallest, the bare shadow class is the default, and sizes increase through md, lg, xl, and 2xl. The shadow-inner class creates an inset shadow, and shadow-none removes all box shadows entirely.

How Do You Use Tailwind Shadow Classes in HTML?

Applying a box shadow in Tailwind is as simple as adding the class to any element. Here are practical examples for common UI patterns:

Card with a Medium Shadow

<div class="bg-white rounded-lg shadow-md p-6">
  <h3 class="text-lg font-semibold">Card Title</h3>
  <p class="text-gray-600">Card content goes here.</p>
</div>

Button with Shadow and Hover Elevation

<button class="bg-blue-600 text-white px-6 py-3 rounded-lg
               shadow-md hover:shadow-xl transition-shadow duration-200">
  Get Started
</button>

Input Field with Inner Shadow

<input type="text"
       class="w-full border rounded-md px-4 py-2 shadow-inner
              focus:ring-2 focus:ring-blue-500"
       placeholder="Enter your email" />

These examples show how Tailwind shadow utilities integrate with other utility classes. No custom CSS is needed for standard shadow effects.

How Do You Add Hover Shadow Transitions in Tailwind?

One of the most common shadow patterns in modern UI design is the hover lift effect, where an element appears to elevate when a user hovers over it. Tailwind makes this trivial with state-variant prefixes and transition utilities.

<!-- Subtle lift on hover -->
<div class="shadow-sm hover:shadow-lg transition-shadow duration-200">
  Hover to lift
</div>

<!-- Card with scale + shadow -->
<div class="shadow-md hover:shadow-2xl hover:-translate-y-1
            transition-all duration-200">
  Interactive card
</div>

<!-- Remove shadow on press -->
<button class="shadow-lg active:shadow-none transition-shadow duration-150">
  Press me
</button>

The key utilities to combine with shadows are transition-shadow (or transition-all) and a duration class like duration-200. You can also use the focus:, active:, and group-hover: prefixes to trigger shadow changes on different interaction states.

How Do You Use Colored Shadows in Tailwind CSS?

Starting with Tailwind CSS v3.1, you can tint shadows with any color from your palette using the shadow-{color} utilities. This is especially useful for branded UI elements or glassmorphism effects.

<!-- Blue-tinted shadow -->
<div class="shadow-lg shadow-blue-500/40">
  Blue glow
</div>

<!-- Branded button with matching shadow -->
<button class="bg-indigo-600 text-white shadow-lg shadow-indigo-500/50
               hover:shadow-indigo-500/70 transition-shadow">
  Sign Up
</button>

<!-- Subtle warm shadow -->
<div class="shadow-xl shadow-orange-200/30">
  Warm glow card
</div>

Colored shadows accept opacity modifiers using the / syntax (e.g., shadow-blue-500/50 for 50% opacity). This lets you fine-tune the intensity without defining custom shadow values.

How Do You Add Custom Box Shadows in tailwind.config.js?

When the default shadow scale does not match your design system, you can extend or override it in your Tailwind configuration file. This is where freeboxshadow.app becomes especially useful: design the shadow visually, copy the CSS value, and paste it into your config.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'soft': '0 2px 15px -3px rgba(0, 0, 0, 0.07),
                 0 10px 20px -2px rgba(0, 0, 0, 0.04)',
        'hard': '5px 5px 0px 0px rgba(0, 0, 0, 1)',
        'glow': '0 0 15px rgba(196, 154, 42, 0.4)',
        'card': '0 1px 3px rgba(0,0,0,0.08),
                 0 8px 24px rgba(0,0,0,0.04)',
        'elevated': '0 12px 40px -8px rgba(0, 0, 0, 0.15)',
      }
    }
  }
}

After adding these entries, you can use shadow-soft, shadow-hard, shadow-glow, and so on as utility classes. Combine them with hover variants and transitions just like the built-in shadows.

Using Arbitrary Values

If you need a one-off shadow without editing your config, Tailwind supports arbitrary values with square brackets:

<!-- Arbitrary shadow value -->
<div class="shadow-[0_4px_20px_rgba(0,0,0,0.12)]">
  Custom one-off shadow
</div>

<!-- Arbitrary inset shadow -->
<div class="shadow-[inset_0_2px_8px_rgba(0,0,0,0.1)]">
  Custom inset
</div>

Note that spaces in the CSS value must be replaced with underscores when using the arbitrary value syntax. For complex multi-layer shadows, defining them in tailwind.config.js is cleaner and more maintainable.

How Does freeboxshadow.app Help with Tailwind Shadows?

Creating the perfect shadow by trial and error in code is slow. freeboxshadow.app gives you a visual editor where you can adjust every shadow parameter in real time and see the result immediately on a live preview box.

Here is the typical workflow for Tailwind projects:

1. Open freeboxshadow.app and use the sliders to set horizontal offset, vertical offset, blur radius, spread radius, and color.
2. Add multiple shadow layers if your design requires layered shadows (common for realistic depth effects).
3. Toggle inset mode to create inner shadows for inputs or pressed states.
4. Copy the CSS value from the output panel with one click.
5. Paste into your Tailwind config under theme.extend.boxShadow, or use it as an arbitrary value like shadow-[your_value].

Best Practices for Box Shadows in Tailwind CSS

• Use shadows consistently. Pick 2-3 shadow sizes for your project (e.g., shadow-sm for subtle elements, shadow-md for cards, shadow-xl for modals) and stick to them.
• Pair shadows with rounded corners. Shadows look more natural on elements with rounded-lg or rounded-xl classes.
• Always add transitions. When combining shadows with hover states, use transition-shadow duration-200 for smooth animations.
• Consider dark mode. Shadows are less visible on dark backgrounds. Use dark:shadow-lg or dark:shadow-2xl to increase shadow intensity in dark mode, or switch to colored shadows with dark:shadow-white/5.
• Reduce shadow opacity on colored backgrounds. Default Tailwind shadows use black at low opacity, which can look harsh on vibrant colored surfaces. Use the colored shadow utilities or define custom values with lower opacity.
• Performance matters. Box shadows are generally performant, but avoid animating box-shadow on dozens of elements simultaneously. For heavy animations, consider using filter: drop-shadow() or pseudo-element techniques.