Shadows, Opacity & Filters in Tailwind CSS
From the Tailwind CSS cheat sheet · Effects & Filters · verified Jul 2026
Shadows, Opacity & Filters
Box shadows, opacity, and visual filters.
html
<!-- Box shadows -->
<div class="shadow-sm">Small shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl/20">20% opacity shadow</div>
<div class="shadow-blue-500/25">Colored shadow</div>
<!-- Opacity -->
<div class="opacity-50">50% transparent</div>
<!-- Filters -->
<img class="blur-sm" />
<img class="grayscale" />
<div class="backdrop-blur-md bg-white/30">Glass effect</div>💡 shadow-xl/20 adds opacity to shadows — makes them subtle and professional
⚡ backdrop-blur-md + bg-white/30 creates the popular frosted glass effect
📌 Shadow colors (shadow-blue-500/25) create modern colored shadow effects
🟢 Use shadow-inner for inset shadows — great for pressed button states
shadowsopacityfiltersblurbackdrop