DEV Community

Cover image for Day 8: How to Add Custom Shadows and Depth in Tailwind CSS
Ruqaiya Beguwala
Ruqaiya Beguwala

Posted on • Originally published at Medium

Day 8: How to Add Custom Shadows and Depth in Tailwind CSS

#tailwindcss #webdev #ui

Welcome Back to 15 Days of Tailwind Tips

We're now more than halfway through this Tailwind CSS series, and today we're covering a small but powerful detail that can take your design from flat to polished — box shadows and depth styling in Tailwind.

Well-placed shadows not only improve visual hierarchy but also help users distinguish interactive elements like buttons, cards, and modals.

Let’s break down Tailwind’s shadow utilities and how to use them for subtle or strong depth effects — using only utility classes.

Basic Shadow Classes in Tailwind CSS

Tailwind gives you a straightforward set of utility classes to control shadows.

<div class="shadow-sm">Small shadow</div> <div class="shadow">Default shadow</div> <div class="shadow-md">Medium shadow</div> <div class="shadow-lg">Large shadow</div> <div class="shadow-xl">Extra large shadow</div> <div class="shadow-2xl">2x large shadow</div>
Enter fullscreen mode Exit fullscreen mode

These utilities correspond to predefined shadow levels in your Tailwind config.

You can apply them to nearly any block element — cards, buttons, headers, modals — and the effect is instant.

Applying Shadows on Hover

Tailwind also makes it easy to create interactive effects with hover: variants.

<div class="shadow hover:shadow-lg transition duration-300 p-4 rounded bg-white"> Hover to see the shadow grow. </div>
Enter fullscreen mode Exit fullscreen mode

Here, the card uses:

  • shadow: initial state
  • hover:shadow-lg: increases depth on hover
  • transition duration-300: animates the change smoothly

This technique is widely used on buttons, cards, and any interactive surface.

Subtle Shadows with Colors and Transparency

You can pair shadows with color utilities and borders to control visual weight.

<div class="shadow-md border border-gray-200 bg-white p-6 rounded"> A soft, elegant card with light shadow and border. </div>
Enter fullscreen mode Exit fullscreen mode

Combining shadow-md with a light border makes the card feel elevated without being overwhelming — ideal for minimalist UI.

Custom Shadows via Configuration (Optional)

If the default levels don’t give you what you want, Tailwind allows full customization in your tailwind.config.js.

theme: { extend: { boxShadow: { 'custom-soft': '0 4px 6px rgba(0, 0, 0, 0.05)', 'custom-strong': '0 10px 20px rgba(0, 0, 0, 0.15)', }, }, }
Enter fullscreen mode Exit fullscreen mode

Then use it like:

<div class="shadow-custom-soft">Custom soft shadow</div>
Enter fullscreen mode Exit fullscreen mode

This is particularly useful when matching a design system or brand guideline.

Advanced Tips & Tricks

Once you’ve mastered the basic shadow utilities, here are some advanced ways to elevate your UI:

1. Combine shadow with ring for Better Focus Styles 

<button class="shadow-md ring-2 ring-blue-400 focus:outline-none"> Button with focus ring and shadow </button>
Enter fullscreen mode Exit fullscreen mode

Using both gives you stronger focus states and accessibility cues.

2. Add hover:scale-105 with hover:shadow-lg for 3D Effects 

<div class="transform hover:scale-105 hover:shadow-lg transition"> Slight zoom on hover + shadow = elevated feel </div>
Enter fullscreen mode Exit fullscreen mode

This is great for cards, tiles, or pricing sections.

3. Use shadow-inner for Inset Styling 

<div class="shadow-inner bg-gray-100 p-4 rounded"> This card has an inset shadow. </div>
Enter fullscreen mode Exit fullscreen mode

Perfect for subtle depth on input fields or panels.

4. Dark Mode-Friendly Shadows

Pair light and dark background colors with adjustable shadows.

<div class="bg-white dark:bg-gray-800 shadow-md dark:shadow-lg text-gray-900 dark:text-white p-4"> Works in both light and dark themes. </div>
Enter fullscreen mode Exit fullscreen mode

Use dark: variants to control shadow strength in each mode.

5. Shadow + Border + Hover = Excellent UI State Control 

<div class="border border-gray-200 shadow hover:shadow-md hover:border-gray-300 transition p-4 rounded"> Full control over interaction states. </div>
Enter fullscreen mode Exit fullscreen mode

Combining multiple subtle cues improves clarity without overwhelming users.

6. Animate Shadow Intensity with transition-shadow 

<div class="shadow-sm hover:shadow-lg transition-shadow duration-300 p-4"> Smooth shadow transitions on hover. </div>
Enter fullscreen mode Exit fullscreen mode

This adds polish to UI feedback and feels more intentional than instant changes.

Conclusion

Tailwind CSS gives you a full suite of tools to apply and animate shadows without ever writing custom CSS. Whether you're building cards, buttons, or full layouts, shadows are an effective way to add depth and focus.

Start small with default utilities like shadow and hover:shadow-lg, and experiment with more expressive combinations like shadow-inner, dark:shadow-lg, and transition-shadow as you grow more comfortable.

Tomorrow in Day 9, we’ll go beyond visual styling and explore how to build glassmorphism effects using Tailwind, including how to use backdrop-blur, transparency, and subtle layering.

Top comments (0)