How to use shadows in Tailwind CSS

Shadows are one of those design elements that seem simple but make a huge difference in how your interface feels. They add depth, create visual hierarchy, and help important elements stand out.

Without shadows, everything looks flat and stuck to the page. With them, you get that nice layered effect that makes interfaces feel more polished and professional.

Tailwind CSS gives you a bunch of shadow utilities right out of the box, and they're super easy to use. Let me show you how to work with them.

Basic shadow utilities

Tailwind comes with predefined shadow sizes that range from super subtle to pretty dramatic. The classes go from shadow-2xs (barely noticeable) all the way up to shadow-2xl (very prominent).

Here's the basic scale:

• shadow-2xs and shadow-xs - Perfect for subtle hints of depth
• shadow-sm and shadow-md - Your everyday shadows for cards and containers
• shadow-lg and shadow-xl - When you want elements to really float
• shadow-2xl - The big one for modals and overlays

You can also use shadow-none to remove shadows completely, which is handy when you need to override a shadow at different breakpoints.

```html

  
Subtle shadow - great for cards


  
Medium shadow - nice balance


  
Large shadow - really stands out

```

The nice thing about these predefined sizes is they're designed to work well together. You can use smaller shadows for nested elements and larger ones for top-level components without things looking weird.

Adding color to your shadows

By default, Tailwind shadows are black with some transparency. But you can add color to them, which opens up some really cool design possibilities.

The syntax is simple: shadow-[color]-[shade]. So if you want a blue shadow, you'd use something like shadow-blue-500. If you want it lighter, go with shadow-blue-300. Want it darker? Try shadow-blue-700.

You can use any color from Tailwind's palette - red, purple, green, pink, whatever fits your design. And the best part? You can combine the color with the size utilities.

Here's something neat. You can also control the opacity using the slash modifier like shadow-blue-500/50. That gives you a blue shadow at 50% opacity. Super useful for fine-tuning the effect.

```html

  
Card with blue shadow


  
Card with purple shadow


  
Card with pink shadow

```

Colored shadows work best when they match or complement the element's main color. A blue button with a subtle blue shadow looks way more cohesive than a blue button with a gray shadow.

Box shadow vs drop shadow

Tailwind actually has two types of shadow utilities, and knowing when to use each one matters.

The shadow-* utilities we've been using? Those create box shadows. They work great for regular elements like divs, cards, and buttons. Box shadows create a rectangular shadow around the element's box.

But then there's drop-shadow-* utilities. These are different because they follow the actual shape of the element. This is super useful for SVG icons, images with transparency, or text elements.

Think of it this way: box shadow creates a shadow around the box, drop shadow creates a shadow around the actual visible content.

```html






```

For most everyday use cases - cards, buttons, containers - stick with box shadow. Save drop shadow for when you're working with SVG, transparent images, or need the shadow to follow irregular shapes.

Creating custom shadow values

Sometimes the predefined shadows don't quite hit the mark for what you need. Good news: Tailwind lets you create custom shadows using arbitrary values.

The syntax uses square brackets: shadow-[your-custom-value]. Inside those brackets, you write standard CSS box-shadow values.

Want a really tight shadow? Try shadow-[0_2px_4px_rgba(0,0,0,0.3)]. Need an inner glow effect? Use shadow-[inset_0_0_10px_rgba(59,130,246,0.5)]. You can get creative here.

One popular effect is the neumorphic look, where shadows give elements a soft, raised appearance. Or you can stack multiple shadows by separating them with commas to create unique depth effects.

```html


  
Custom tight shadow



  
Soft neumorphic look



  
Inner glow effect

```

Just remember that arbitrary values can get messy in your markup. If you find yourself using the same custom shadow in multiple places, it might be worth adding it to your Tailwind config instead.

Real-world shadow examples

Let me show you some practical examples of how shadows work in actual UI components. These are the kind of things you'll build all the time.

First up: cards. A simple card with shadow-md gives it that nice lifted feel without being too dramatic. Perfect for blog posts, product listings, or dashboard widgets.

Buttons benefit from shadows too. A subtle shadow-sm on a button makes it look clickable. Add hover:shadow-lg and you get that nice interactive lift effect when someone hovers over it.

Dropdown menus and modals need stronger shadows to indicate they're floating above other content. shadow-xl or shadow-2xl work great here because they really separate the element from the page.

```html


  
  
Product Name
  
$29.99
  
    Add to Cart
  



  +



  

    
Modal Title
    
Modal content goes here
  

```

The key to using shadows well is subtlety. Start with smaller shadows and only go bigger when you really need to emphasize something. Too many strong shadows make your interface feel chaotic.

And don't forget about hover states. Adding transition-shadow with a shadow change on hover gives your UI that polished, interactive feel that users expect.

That's everything you need to know about working with shadows in Tailwind CSS. From basic utilities to custom effects, you now have the tools to add depth and polish to your designs.

Shadows might seem like a small detail, but they make a big difference in how professional your interfaces look. Start with the basics, experiment with colors, and don't be afraid to create custom values when you need something specific.

Now go make something that looks awesome!