iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Shadows / Effects

By · Reviewed & last updated · Part of Tailwind CSS Tutorial

Tailwinds effects utilities cover shadows, opacity, blur, brightness, grayscale, hue-rotate, saturation, blend modes, mix-blend-mode, and ring (a focus outline that does not affect layout). Most of these used to require hand-written CSS; now they are utility classes with sensible scales.

Shadows, opacity, blur, ring, and blend modes

EXAMPLE
<!-- 1) Shadows — a scale from sm to 2xl, plus 'inner' and arbitrary -->
<div class='shadow-sm   p-4'>sm</div>
<div class='shadow      p-4'>default</div>
<div class='shadow-md   p-4'>md</div>
<div class='shadow-lg   p-4'>lg</div>
<div class='shadow-xl   p-4'>xl</div>
<div class='shadow-2xl  p-4'>2xl</div>
<div class='shadow-inner p-4'>inner</div>
<div class='shadow-[0_30px_60px_-15px_rgba(0,0,0,.3)] p-4'>arbitrary</div>

<!-- 2) Opacity — for whole elements; use bg-opacity / text-opacity for parts -->
<div class='opacity-50 bg-blue-600 text-white p-4'>50% opacity</div>
<div class='bg-blue-600/40 text-white p-4'>Tailwind v3 colour-with-opacity syntax</div>

<!-- 3) Blur on the element itself -->
<img src='/photo.jpg' class='blur-sm hover:blur-none transition'>

<!-- 4) Backdrop filters — blur etc. through the element to what is BEHIND it.
     Pair with a translucent background for the 'frosted glass' look. -->
<div class='backdrop-blur backdrop-saturate-150 bg-white/60 p-4'>
  Frosted glass card
</div>

<!-- 5) Focus rings — a non-layout-shifting outline -->
<button class='px-3 py-1.5 rounded
                ring-offset-2 ring-offset-white
                focus:outline-none focus:ring-2 focus:ring-blue-500'>
  Accessible focus ring
</button>

<!-- 6) Mix-blend-mode and isolation -->
<div class='isolate'>                       <!-- creates a new stacking context -->
  <h2 class='mix-blend-multiply text-pink-500 text-6xl font-bold'>Multiply</h2>
  <div class='absolute inset-0 bg-yellow-300 -z-10'></div>
</div>

<!-- 7) Filters: brightness, contrast, grayscale, hue-rotate, saturate, sepia -->
<img src='/cat.jpg' class='grayscale hover:grayscale-0 hover:brightness-110 transition duration-300'>
<img src='/sunset.jpg' class='saturate-150 hue-rotate-15'>

<!-- 8) Drop-shadow (different from box-shadow!) follows the alpha shape -->
<svg class='w-24 h-24 drop-shadow-xl text-blue-600' viewBox='0 0 24 24' fill='currentColor'>
  <path d='M12 2 L22 22 L2 22 Z' />
</svg>

<!-- 9) Performance: GPU-composited filters (blur, drop-shadow) are cheap on
     small areas but expensive on full-page overlays. Test on mid-tier mobile. -->

Why it matters

The colour-with-opacity slash syntax — bg-blue-600/40, text-black/70 — replaced the older bg-opacity utility in v3 and is dramatically cleaner. It composes with every colour utility, so you can stop mentally tracking which color has its own opacity scale and which does not.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
<div class="shadow-lg ring-1 ring-black/5">Card</div>
Try it Yourself »

Discussion

Loading…