Shadows & Effects
Learn how to add depth and polish with Tailwind CSS shadow-*, opacity-*, and blur utilities.
Introduction
Shadows, opacity, and blur are what give flat interfaces a sense of depth and hierarchy. Tailwind provides ready-made scales for all three, so you can lift a card off the page, fade an overlay in and out, or create a frosted-glass effect with just a few utility classes.
- The default shadow-* scale and how to apply it.
- How to create colored shadows.
- How opacity-* controls element transparency.
- How blur-* and backdrop-blur-* create soft and frosted-glass effects.
Box Shadow Scale
Tailwind's shadow-* utilities range from shadow-sm (a subtle hint of elevation) through shadow, shadow-md, shadow-lg, shadow-xl, and shadow-2xl (a dramatic, floating effect). shadow-none removes any shadow entirely.
<div class="flex gap-6"> <div class="shadow-sm bg-white p-6 rounded-lg">sm</div> <div class="shadow-md bg-white p-6 rounded-lg">md</div> <div class="shadow-xl bg-white p-6 rounded-lg">xl</div></div>Click Run to see what this code prints.
Colored Shadows
By default, shadow-* utilities use a neutral gray/black tint. You can pair a shadow utility with shadow-{color}-{shade}/opacity syntax to create a colored, glowing shadow, which works especially well on buttons that use a bold brand color.
<button class="shadow-lg shadow-blue-500/50 bg-blue-500 text-white px-5 py-2 rounded-lg"> Glowing Button</button>Click Run to see what this code prints.
Opacity Utilities
opacity-* controls how transparent an entire element (including its children) appears, on a scale from opacity-0 (fully invisible) to opacity-100 (fully opaque), typically in steps of 5, 10, 25, 50, 75, and so on. It is commonly used for disabled states, overlays, and fade transitions.
<div class="relative"> <img src="/photo.jpg" class="rounded-lg" alt="Cover" /> <div class="absolute inset-0 bg-black opacity-40 rounded-lg"></div> <p class="absolute bottom-4 left-4 text-white font-semibold">Photo Caption</p></div>Click Run to see what this code prints.
Blur Utilities
blur-* applies a CSS filter blur directly to an element, ranging from blur-sm (a light blur) to blur-2xl and blur-3xl (heavily blurred). This is useful for background decoration, skeleton loading placeholders, or blurred preview images.
<div class="blur-sm bg-gradient-to-r from-pink-400 to-purple-500 w-48 h-24 rounded-lg"></div>Click Run to see what this code prints.
Backdrop Blur
While blur-* blurs the element itself, backdrop-blur-* blurs whatever is behind a semi-transparent element, creating the popular "frosted glass" effect seen in modern navigation bars and modals.
<nav class="backdrop-blur-md bg-white/70 fixed top-0 w-full p-4 shadow-sm"> <span class="font-bold">PrograMinds</span></nav>Click Run to see what this code prints.
Common Mistakes
- Using opacity-* on a container when only its background should be transparent — opacity fades all children too, including text, making it harder to read.
- Using shadow-2xl everywhere, which flattens visual hierarchy since nothing stands out if everything floats equally high.
- Forgetting that backdrop-blur-* needs a semi-transparent background color (like bg-white/70) to actually show the frosted-glass effect.
- Applying heavy blur-* to large blocks of readable text, which harms accessibility and legibility.
- Not testing colored shadows (shadow-color/opacity) against both light and dark backgrounds, where the glow can look very different.
Best Practices
- Reserve larger shadows like shadow-xl and shadow-2xl for elements that should feel prominent, such as modals and popovers.
- Use bg-black/40 style opacity modifiers on the background color itself rather than opacity-* on the whole element when you only want to darken a background.
- Pair backdrop-blur-* with a translucent background color for authentic frosted-glass navigation and cards.
- Use subtle blur-sm for decorative shapes and gradients, not for essential content.
- Combine shadow-* with hover: to add a lifted shadow on hover for interactive cards.
Frequently Asked Questions
opacity-50 fades the entire element and all of its children equally. bg-black/50 only makes the background color itself 50% transparent, leaving text and other children fully opaque.
Backdrop filter support is strong in modern browsers (Chrome, Edge, Safari, Firefox), but very old browsers may ignore it gracefully, simply showing the background color without the blur effect.
Yes, you can combine shadow-*, blur-*, and backdrop-blur-* freely on the same or different elements to build layered depth effects.
Key Takeaways
- shadow-* utilities range from shadow-sm to shadow-2xl for controlling elevation.
- shadow-{color}/{opacity} creates colored, glowing shadows.
- opacity-* fades an entire element and its children.
- blur-* blurs the element itself, while backdrop-blur-* blurs what is behind it.
- Frosted-glass effects combine backdrop-blur-* with a translucent background color.
Summary
Shadows, opacity, and blur are the finishing touches that separate a flat design from one with real visual depth. Used sparingly and consistently, they create clear hierarchy and polish. Next, you will learn how to style backgrounds and build eye-catching gradients.