EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Tailwind CSS Shadows & Effects: Shadows, Opacity, and Blend Modes

Shadows (shadow-*)

The shadow-* classes set an element's box-shadow, offering a range of sizes from shadow-sm to shadow-2xl.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shadow Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Shadow sizes -->
    <div class="bg-white rounded-lg p-6">
      <h3 class="font-semibold mb-4">Shadow Sizes</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
        <div class="bg-white p-6 rounded-lg shadow-sm text-center">
          <div class="text-sm font-medium">shadow-sm</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow text-center">
          <div class="text-sm font-medium">shadow</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-md text-center">
          <div class="text-sm font-medium">shadow-md</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-lg text-center">
          <div class="text-sm font-medium">shadow-lg</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-xl text-center">
          <div class="text-sm font-medium">shadow-xl</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-2xl text-center">
          <div class="text-sm font-medium">shadow-2xl</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-inner text-center">
          <div class="text-sm font-medium">shadow-inner</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-none text-center">
          <div class="text-sm font-medium">shadow-none</div>
        </div>
      </div>
    </div>

    <!-- Shadow colors -->
    <div class="bg-gray-200 rounded-lg p-6">
      <h3 class="font-semibold mb-4">Shadow Colors</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
        <div class="bg-white p-6 rounded-lg shadow-lg shadow-blue-500/50 text-center">
          <div class="text-sm font-medium">blue-500/50</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-lg shadow-green-500/50 text-center">
          <div class="text-sm font-medium">green-500/50</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-lg shadow-purple-500/50 text-center">
          <div class="text-sm font-medium">purple-500/50</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-lg shadow-red-500/50 text-center">
          <div class="text-sm font-medium">red-500/50</div>
        </div>
      </div>
    </div>

    <!-- Practical applications -->
    <div class="bg-gray-200 rounded-lg p-6">
      <h3 class="font-semibold mb-4">Practical Applications</h3>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Card shadow -->
        <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow">
          <h4 class="font-semibold mb-2">Card Shadow</h4>
          <p class="text-gray-600 text-sm">Shadow increases on hover</p>
        </div>
        <!-- Button shadow -->
        <div class="flex items-center justify-center">
          <button class="bg-blue-600 text-white px-6 py-3 rounded-lg shadow-md hover:shadow-lg hover:bg-blue-700 transition-all">
            Button Shadow
          </button>
        </div>
        <!-- Floating effect -->
        <div class="bg-white rounded-xl shadow-xl p-6 -translate-y-2">
          <h4 class="font-semibold mb-2">Floating Effect</h4>
          <p class="text-gray-600 text-sm">Combined with translate</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Shadow class reference:

Class CSS Value Description
shadow-sm Small shadow Subtle shadow effect
shadow Default shadow Standard shadow effect
shadow-md Medium shadow Medium-sized shadow
shadow-lg Large shadow Larger shadow effect
shadow-xl Extra-large shadow Wide-range shadow
shadow-2xl Extra-large shadow Extra wide-range shadow
shadow-inner Inset shadow Inner element shadow
shadow-none No shadow Removes shadow
shadow-blue-500/50 Blue shadow at 50% opacity Custom shadow color

Traditional CSS vs Tailwind The traditional approach requires writing complex properties like box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1) in CSS, while Tailwind uses class names like shadow-lg for direct declaration. shadow-blue-500/50 supports custom shadow colors and opacity.

Tip: shadow-inner creates an inset shadow effect, ideal for sunken buttons or input fields. shadow-none is used to remove a default shadow.

Opacity (opacity-*)

The opacity-* classes set the overall transparency of an element.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Opacity Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Opacity gradient -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Opacity Gradient</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 bg-blue-500 opacity-100 rounded flex items-center justify-center text-white text-xs">100</div>
        <div class="w-24 h-24 bg-blue-500 opacity-75 rounded flex items-center justify-center text-white text-xs">75</div>
        <div class="w-24 h-24 bg-blue-500 opacity-50 rounded flex items-center justify-center text-white text-xs">50</div>
        <div class="w-24 h-24 bg-blue-500 opacity-25 rounded flex items-center justify-center text-white text-xs">25</div>
        <div class="w-24 h-24 bg-blue-500 opacity-0 rounded flex items-center justify-center text-white text-xs">0</div>
      </div>
    </div>

    <!-- More opacity values -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">More Opacity Values</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-20 h-20 bg-green-500 opacity-90 rounded flex items-center justify-center text-white text-xs">90</div>
        <div class="w-20 h-20 bg-green-500 opacity-80 rounded flex items-center justify-center text-white text-xs">80</div>
        <div class="w-20 h-20 bg-green-500 opacity-70 rounded flex items-center justify-center text-white text-xs">70</div>
        <div class="w-20 h-20 bg-green-500 opacity-60 rounded flex items-center justify-center text-white text-xs">60</div>
        <div class="w-20 h-20 bg-green-500 opacity-50 rounded flex items-center justify-center text-white text-xs">50</div>
        <div class="w-20 h-20 bg-green-500 opacity-40 rounded flex items-center justify-center text-white text-xs">40</div>
        <div class="w-20 h-20 bg-green-500 opacity-30 rounded flex items-center justify-center text-white text-xs">30</div>
        <div class="w-20 h-20 bg-green-500 opacity-20 rounded flex items-center justify-center text-white text-xs">20</div>
        <div class="w-20 h-20 bg-green-500 opacity-10 rounded flex items-center justify-center text-white text-xs">10</div>
        <div class="w-20 h-20 bg-green-500 opacity-5 rounded flex items-center justify-center text-white text-xs">5</div>
      </div>
    </div>

    <!-- Practical applications -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Practical Applications</h3>
      <div class="space-y-4">
        <!-- Disabled state -->
        <div class="flex items-center gap-4">
          <button class="bg-blue-600 text-white px-4 py-2 rounded">Normal Button</button>
          <button class="bg-blue-600 text-white px-4 py-2 rounded opacity-50 cursor-not-allowed">Disabled Button</button>
        </div>
        <!-- Overlay layer -->
        <div class="relative h-48 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://picsum.photos/400/200')"></div>
          <div class="absolute inset-0 bg-black opacity-50 flex items-center justify-center">
            <span class="text-white text-xl font-semibold">Overlay Effect</span>
          </div>
        </div>
        <!-- Fade in/out -->
        <div class="flex gap-4">
          <div class="w-32 h-32 bg-purple-500 rounded-lg opacity-100 hover:opacity-75 transition-opacity cursor-pointer flex items-center justify-center text-white text-sm">
            Hover me
          </div>
          <div class="w-32 h-32 bg-purple-500 rounded-lg opacity-75 hover:opacity-100 transition-opacity cursor-pointer flex items-center justify-center text-white text-sm">
            Hover me
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Opacity class reference:

Class CSS Value Description
opacity-0 opacity: 0 Fully transparent
opacity-5 opacity: 0.05 5% opacity
opacity-10 opacity: 0.1 10% opacity
opacity-20 opacity: 0.2 20% opacity
opacity-25 opacity: 0.25 25% opacity
opacity-30 opacity: 0.3 30% opacity
opacity-40 opacity: 0.4 40% opacity
opacity-50 opacity: 0.5 50% opacity
opacity-60 opacity: 0.6 60% opacity
opacity-70 opacity: 0.7 70% opacity
opacity-75 opacity: 0.75 75% opacity
opacity-80 opacity: 0.8 80% opacity
opacity-90 opacity: 0.9 90% opacity
opacity-95 opacity: 0.95 95% opacity
opacity-100 opacity: 1 Fully opaque

Traditional CSS vs Tailwind The traditional approach requires setting the opacity property in CSS and remembering specific values, while Tailwind uses semantic class names like opacity-50 for direct declaration. Opacity values range from 0 to 100 in steps of 5.

Tip: opacity affects the entire element (including content and children). If you only want the background to be transparent, use the bg-blue-500/50 syntax instead.

Blend Modes (mix-blend-*)

The mix-blend-* classes set an element's blend mode, controlling how it blends with the content beneath it.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blend Mode Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Basic blend modes -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Basic Blend Modes</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-normal flex items-center justify-center text-white font-bold">normal</div>
        </div>
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-multiply flex items-center justify-center text-white font-bold">multiply</div>
        </div>
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-screen flex items-center justify-center text-white font-bold">screen</div>
        </div>
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-overlay flex items-center justify-center text-white font-bold">overlay</div>
        </div>
      </div>
    </div>

    <!-- More blend modes -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">More Blend Modes</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-darken flex items-center justify-center text-white font-bold">darken</div>
        </div>
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-lighten flex items-center justify-center text-white font-bold">lighten</div>
        </div>
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-color-dodge flex items-center justify-center text-white font-bold">color-dodge</div>
        </div>
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-color-burn flex items-center justify-center text-white font-bold">color-burn</div>
        </div>
      </div>
    </div>

    <!-- Practical applications -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Practical Applications</h3>
      <div class="space-y-4">
        <!-- Image blending -->
        <div class="relative h-48 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://picsum.photos/400/200')"></div>
          <div class="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-600 mix-blend-multiply"></div>
          <div class="relative h-full flex items-center justify-center text-white text-2xl font-bold">
            Blend Mode Effect
          </div>
        </div>
        <!-- Text blending -->
        <div class="relative h-24 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-lg overflow-hidden">
          <div class="absolute inset-0 flex items-center justify-center text-4xl font-black text-white mix-blend-overlay">
            TAILWIND
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Blend mode class reference:

Class CSS Value Description
mix-blend-normal mix-blend-mode: normal Normal (default)
mix-blend-multiply mix-blend-mode: multiply Multiply
mix-blend-screen mix-blend-mode: screen Screen
mix-blend-overlay mix-blend-mode: overlay Overlay
mix-blend-darken mix-blend-mode: darken Darken
mix-blend-lighten mix-blend-mode: lighten Lighten
mix-blend-color-dodge mix-blend-mode: color-dodge Color dodge
mix-blend-color-burn mix-blend-mode: color-burn Color burn
mix-blend-hard-light mix-blend-mode: hard-light Hard light
mix-blend-soft-light mix-blend-mode: soft-light Soft light
mix-blend-difference mix-blend-mode: difference Difference
mix-blend-exclusion mix-blend-mode: exclusion Exclusion
mix-blend-hue mix-blend-mode: hue Hue
mix-blend-saturation mix-blend-mode: saturation Saturation
mix-blend-color mix-blend-mode: color Color
mix-blend-luminosity mix-blend-mode: luminosity Luminosity

Traditional CSS vs Tailwind The traditional approach requires setting the mix-blend-mode property in CSS, while Tailwind uses class names like mix-blend-multiply for direct declaration. Blend modes are commonly used in creative design for image overlays, text effects, and more.

Tip: mix-blend-multiply is often used to overlay colors on images for a deep-toned effect. mix-blend-screen is used to create bright, luminous effects.

Drop Shadow Filter (drop-shadow-*)

The drop-shadow-* classes use CSS filter: drop-shadow() to add shadows to elements, which is ideal for irregular shapes.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Drop Shadow Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- drop-shadow sizes -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">drop-shadow Sizes</h3>
      <div class="flex flex-wrap gap-8 items-center">
        <div class="text-6xl drop-shadow-sm">🎯</div>
        <div class="text-6xl drop-shadow">🎯</div>
        <div class="text-6xl drop-shadow-md">🎯</div>
        <div class="text-6xl drop-shadow-lg">🎯</div>
        <div class="text-6xl drop-shadow-xl">🎯</div>
        <div class="text-6xl drop-shadow-2xl">🎯</div>
        <div class="text-6xl drop-shadow-none">🎯</div>
      </div>
    </div>

    <!-- drop-shadow vs box-shadow -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">drop-shadow vs box-shadow</h3>
      <div class="grid grid-cols-2 gap-8">
        <div class="text-center">
          <p class="text-sm text-gray-600 mb-4">box-shadow (shadow-lg)</p>
          <div class="inline-block bg-blue-500 text-white px-6 py-3 rounded-lg shadow-lg">Shadow</div>
        </div>
        <div class="text-center">
          <p class="text-sm text-gray-600 mb-4">drop-shadow (drop-shadow-lg)</p>
          <div class="inline-block bg-blue-500 text-white px-6 py-3 rounded-lg drop-shadow-lg">Shadow</div>
        </div>
      </div>
    </div>

    <!-- Practical applications -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Practical Applications</h3>
      <div class="space-y-4">
        <!-- Image shadow -->
        <div class="flex gap-4 items-center">
          <img src="https://picsum.photos/100/100" alt="Example" class="rounded-full drop-shadow-lg">
          <img src="https://picsum.photos/100/100" alt="Example" class="rounded-lg drop-shadow-xl">
        </div>
        <!-- SVG shadow -->
        <div class="flex gap-4 items-center">
          <svg class="w-16 h-16 text-blue-500 drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 14a6 6 0 110-12 6 6 0 010 12z"/>
          </svg>
          <svg class="w-16 h-16 text-green-500 drop-shadow-xl" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 14a6 6 0 110-12 6 6 0 010 12z"/>
          </svg>
        </div>
        <!-- Text shadow effect -->
        <div class="bg-gradient-to-r from-blue-500 to-purple-500 p-8 rounded-lg">
          <span class="text-4xl font-bold text-white drop-shadow-lg">Text with Shadow</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Drop-shadow class reference:

Class CSS Value Description
drop-shadow-sm filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)) Small shadow
drop-shadow filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)) Default shadow
drop-shadow-md filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)) Medium shadow
drop-shadow-lg filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.1)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.06)) Large shadow
drop-shadow-xl filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.1)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.06)) Extra-large shadow
drop-shadow-2xl filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15)) Extra-large shadow
drop-shadow-none filter: drop-shadow(0 0 #0000) No shadow

Traditional CSS vs Tailwind The traditional approach requires writing complex properties like filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.1)) in CSS, while Tailwind uses class names like drop-shadow-lg for direct declaration.

Note: drop-shadow follows the element's alpha channel, making it ideal for irregular shapes (such as PNG images and SVGs). box-shadow creates a rectangular shadow, which is better suited for regular shapes.

Comprehensive Example

Combining all the concepts above, let's create a complete shadows and effects demo.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shadows & Effects Comprehensive Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Card grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <!-- Basic card -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
        <div class="h-48 bg-gradient-to-br from-blue-400 to-blue-600 relative">
          <div class="absolute inset-0 bg-black opacity-20"></div>
          <div class="absolute bottom-4 left-4">
            <span class="bg-white/90 text-blue-600 px-3 py-1 rounded-full text-sm font-medium">Tag</span>
          </div>
        </div>
        <div class="p-6">
          <h3 class="font-semibold text-lg mb-2">Basic Card</h3>
          <p class="text-gray-600 text-sm">Hover effect using shadow-md and hover:shadow-xl</p>
        </div>
      </div>

      <!-- Gradient card -->
      <div class="bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
        <div class="p-6 text-white">
          <div class="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center mb-4 drop-shadow">
            <span class="text-2xl">🎨</span>
          </div>
          <h3 class="font-semibold text-lg mb-2">Gradient Card</h3>
          <p class="opacity-90 text-sm">Gradient background, shadow, and hover animation</p>
        </div>
      </div>

      <!-- Dark card -->
      <div class="bg-gray-800 rounded-xl shadow-xl overflow-hidden">
        <div class="p-6 text-white">
          <div class="flex items-center gap-4 mb-4">
            <img src="https://picsum.photos/50/50" alt="Avatar" class="w-12 h-12 rounded-full ring-2 ring-purple-500">
            <div>
              <div class="font-semibold">Username</div>
              <div class="text-gray-400 text-sm">@username</div>
            </div>
          </div>
          <p class="text-gray-300 text-sm">Dark theme card with ring-styled avatar border</p>
        </div>
      </div>
    </div>

    <!-- Blend mode banner -->
    <div class="relative h-64 rounded-2xl overflow-hidden">
      <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://picsum.photos/800/300')"></div>
      <div class="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-600 mix-blend-multiply"></div>
      <div class="relative h-full flex flex-col items-center justify-center text-white text-center px-4">
        <h2 class="text-4xl font-bold mb-4 drop-shadow-lg">Creative Blend Modes</h2>
        <p class="text-xl opacity-90 drop-shadow">Image overlay effect using mix-blend-multiply</p>
      </div>
    </div>

    <!-- Opacity stacking -->
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h3 class="font-semibold mb-4">Opacity Stacking</h3>
      <div class="relative h-48 bg-gradient-to-r from-gray-100 to-gray-200 rounded-lg overflow-hidden">
        <div class="absolute left-8 top-8 w-32 h-32 bg-blue-500 rounded-lg shadow-lg opacity-100"></div>
        <div class="absolute left-16 top-16 w-32 h-32 bg-blue-500 rounded-lg shadow-lg opacity-75"></div>
        <div class="absolute left-24 top-24 w-32 h-32 bg-blue-500 rounded-lg shadow-lg opacity-50"></div>
        <div class="absolute left-32 top-32 w-32 h-32 bg-blue-500 rounded-lg shadow-lg opacity-25"></div>
      </div>
    </div>

    <!-- Icon shadows -->
    <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl shadow-2xl p-8">
      <div class="flex justify-center gap-8">
        <div class="text-center">
          <div class="text-5xl drop-shadow-lg mb-2">🏠</div>
          <div class="text-gray-400 text-sm">Home</div>
        </div>
        <div class="text-center">
          <div class="text-5xl drop-shadow-lg mb-2">👤</div>
          <div class="text-gray-400 text-sm">User</div>
        </div>
        <div class="text-center">
          <div class="text-5xl drop-shadow-lg mb-2">⚙️</div>
          <div class="text-gray-400 text-sm">Settings</div>
        </div>
        <div class="text-center">
          <div class="text-5xl drop-shadow-lg mb-2">📊</div>
          <div class="text-gray-400 text-sm">Data</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires writing extensive CSS to achieve card shadows, blend mode banners, opacity stacking, and other effects, while Tailwind accomplishes all of this directly in HTML using shadow, opacity, and blend mode utility classes.

❓ FAQ

Q What is the difference between box-shadow and drop-shadow?
A box-shadow (shadow-) creates a rectangular shadow, suited for regular shapes. drop-shadow (drop-shadow-) follows the element's alpha channel, making it ideal for irregular shapes (PNGs, SVGs). drop-shadow has slightly lower performance.
Q How do I create a disabled state for an element?
A Use the opacity-50 cursor-not-allowed combination. opacity-50 makes the element semi-transparent, and cursor-not-allowed displays a prohibited cursor. Add pointer-events-none to fully disable interaction.
Q Does mix-blend-mode affect child elements?
A Yes. mix-blend-mode affects how the entire element and its children blend with the content beneath. If you only want to affect the background, separate the background and content into different layers.
Q How do I set the shadow color opacity?
A Use the shadow-blue-500/50 syntax. /50 means 50% opacity. You can also use values like shadow-blue-500/25 (25% opacity). The default shadow color is black.

📖 Summary

📝 Exercises

  1. ⭐ Create a card component using shadow-md and hover:shadow-xl for a hover shadow effect

  2. ⭐⭐ Create an image gallery using drop-shadow-lg for image shadows and opacity-* for a hover fade-in effect

  3. ⭐⭐⭐ Create a banner component using a background image + mix-blend-multiply gradient overlay + drop-shadow-lg text shadow for a professional visual effect

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏