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

Tailwind CSS Sombras e Efeitos: Sombras, Opacidade e Modos de Mesclagem

Sombras (shadow-*)

As classes shadow-* definem o box-shadow de um elemento, oferecendo uma variedade de tamanhos desde shadow-sm até shadow-2xl.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Sombras</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">
    <!-- Tamanhos de sombra -->
    <div class="bg-white rounded-lg p-6">
      <h3 class="font-semibold mb-4">Tamanhos de Sombra</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>

    <!-- Cores de sombra -->
    <div class="bg-gray-200 rounded-lg p-6">
      <h3 class="font-semibold mb-4">Cores de Sombra</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>

    <!-- Aplicações práticas -->
    <div class="bg-gray-200 rounded-lg p-6">
      <h3 class="font-semibold mb-4">Aplicações Práticas</h3>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Sombra de card -->
        <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow">
          <h4 class="font-semibold mb-2">Sombra de Card</h4>
          <p class="text-gray-600 text-sm">A sombra aumenta ao passar o mouse</p>
        </div>
        <!-- Sombra de botão -->
        <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">
            Sombra de Botão
          </button>
        </div>
        <!-- Efeito flutuante -->
        <div class="bg-white rounded-xl shadow-xl p-6 -translate-y-2">
          <h4 class="font-semibold mb-2">Efeito Flutuante</h4>
          <p class="text-gray-600 text-sm">Combinado com translate</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Referência das classes de sombra:

Classe Valor CSS Descrição
shadow-sm Sombra pequena Efeito de sutil
shadow Sombra padrão Efeito de sombra padrão
shadow-md Sombra média Sombra de tamanho médio
shadow-lg Sombra grande Efeito de sombra maior
shadow-xl Sombra extra-grande Sombra de alcance amplo
shadow-2xl Sombra extra-grande Sombra de alcance ultra-amplo
shadow-inner Sombra interna Sombra interna do elemento
shadow-none Sem sombra Remove a sombra
shadow-blue-500/50 Sombra azul com 50% de opacidade Cor personalizada da sombra

CSS Tradicional vs Tailwind A abordagem tradicional requer escrever propriedades complexas como box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1) no CSS, enquanto o Tailwind usa nomes de classes como shadow-lg para declaração direta. shadow-blue-500/50 suporta cores e opacidade personalizadas da sombra.

Dica: shadow-inner cria um efeito de sombra interna, ideal para botões afundados ou campos de entrada. shadow-none é usada para remover uma sombra padrão.

Opacidade (opacity-*)

As classes opacity-* definem a transparência geral de um elemento.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Opacidade</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">
    <!-- Gradiente de opacidade -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Gradiente de Opacidade</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>

    <!-- Mais valores de opacidade -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Mais Valores de Opacidade</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>

    <!-- Aplicações práticas -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Aplicações Práticas</h3>
      <div class="space-y-4">
        <!-- Estado desabilitado -->
        <div class="flex items-center gap-4">
          <button class="bg-blue-600 text-white px-4 py-2 rounded">Botão Normal</button>
          <button class="bg-blue-600 text-white px-4 py-2 rounded opacity-50 cursor-not-allowed">Botão Desabilitado</button>
        </div>
        <!-- Camada de sobreposição -->
        <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">Efeito de Sobreposição</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">
            Passe o mouse
          </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">
            Passe o mouse
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Referência das classes de opacidade:

Classe Valor CSS Descrição
opacity-0 opacity: 0 Totalmente transparente
opacity-5 opacity: 0.05 5% de opacidade
opacity-10 opacity: 0.1 10% de opacidade
opacity-20 opacity: 0.2 20% de opacidade
opacity-25 opacity: 0.25 25% de opacidade
opacity-30 opacity: 0.3 30% de opacidade
opacity-40 opacity: 0.4 40% de opacidade
opacity-50 opacity: 0.5 50% de opacidade
opacity-60 opacity: 0.6 60% de opacidade
opacity-70 opacity: 0.7 70% de opacidade
opacity-75 opacity: 0.75 75% de opacidade
opacity-80 opacity: 0.8 80% de opacidade
opacity-90 opacity: 0.9 90% de opacidade
opacity-95 opacity: 0.95 95% de opacidade
opacity-100 opacity: 1 Totalmente opaco

CSS Tradicional vs Tailwind A abordagem tradicional requer definir a propriedade opacity no CSS e lembrar valores específicos, enquanto o Tailwind usa nomes de classes semânticas como opacity-50 para declaração direta. Os valores de opacidade variam de 0 a 100 em etapas de 5.

Dica: opacity afeta o elemento inteiro (incluindo conteúdo e filhos). Se você quer que apenas o fundo seja transparente, use a sintaxe bg-blue-500/50 em vez disso.

Modos de Mesclagem (mix-blend-*)

As classes mix-blend-* definem o modo de mesclagem de um elemento, controlando como ele se mescla com o conteúdo abaixo dele.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Modos de Mesclagem</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">
    <!-- Modos de mesclagem básicos -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Modos de Mesclagem Básicos</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>

    <!-- Mais modos de mesclagem -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Mais Modos de Mesclagem</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>

    <!-- Aplicações práticas -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Aplicações Práticas</h3>
      <div class="space-y-4">
        <!-- Mesclagem de imagem -->
        <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">
            Efeito de Modo de Mesclagem
          </div>
        </div>
        <!-- Mesclagem de texto -->
        <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>
▶ Experimente

Referência das classes de modo de mesclagem:

Classe Valor CSS Descrição
mix-blend-normal mix-blend-mode: normal Normal (padrão)
mix-blend-multiply mix-blend-mode: multiply Multiplicar
mix-blend-screen mix-blend-mode: screen Tela
mix-blend-overlay mix-blend-mode: overlay Sobreposição
mix-blend-darken mix-blend-mode: darken Escurecer
mix-blend-lighten mix-blend-mode: lighten Clarear
mix-blend-color-dodge mix-blend-mode: color-dodge Subexposição de cor
mix-blend-color-burn mix-blend-mode: color-burn Superexposição de cor
mix-blend-hard-light mix-blend-mode: hard-light Luz forte
mix-blend-soft-light mix-blend-mode: soft-light Luz suave
mix-blend-difference mix-blend-mode: difference Diferença
mix-blend-exclusion mix-blend-mode: exclusion Exclusão
mix-blend-hue mix-blend-mode: hue Matiz
mix-blend-saturation mix-blend-mode: saturation Saturação
mix-blend-color mix-blend-mode: color Cor
mix-blend-luminosity mix-blend-mode: luminosity Luminosidade

CSS Tradicional vs Tailwind A abordagem tradicional requer definir a propriedade mix-blend-mode no CSS, enquanto o Tailwind usa nomes de classes como mix-blend-multiply para declaração direta. Os modos de mesclagem são comumente usados em design criativo para sobreposições de imagens, efeitos de texto e mais.

Dica: mix-blend-multiply é frequentemente usado para sobrepor cores em imagens para um efeito de tons profundos. mix-blend-screen é usado para criar efeitos brilhantes e luminosos.

Filtro Drop Shadow (drop-shadow-*)

As classes drop-shadow-* usam o CSS filter: drop-shadow() para adicionar sombras a elementos, o que é ideal para formas irregulares.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Drop Shadow</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">
    <!-- Tamanhos de drop-shadow -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Tamanhos de drop-shadow</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">Sombra</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">Sombra</div>
        </div>
      </div>
    </div>

    <!-- Aplicações práticas -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Aplicações Práticas</h3>
      <div class="space-y-4">
        <!-- Sombra de imagem -->
        <div class="flex gap-4 items-center">
          <img src="https://picsum.photos/100/100" alt="Exemplo" class="rounded-full drop-shadow-lg">
          <img src="https://picsum.photos/100/100" alt="Exemplo" class="rounded-lg drop-shadow-xl">
        </div>
        <!-- Sombra de SVG -->
        <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>
        <!-- Efeito de sombra de texto -->
        <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">Texto com Sombra</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Referência das classes de drop-shadow:

Classe Valor CSS Descrição
drop-shadow-sm filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)) Sombra pequena
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)) Sombra padrão
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)) Sombra média
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)) Sombra grande
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)) Sombra extra-grande
drop-shadow-2xl filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15)) Sombra extra-grande
drop-shadow-none filter: drop-shadow(0 0 #0000) Sem sombra

CSS Tradicional vs Tailwind A abordagem tradicional requer escrever propriedades complexas como filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.1)) no CSS, enquanto o Tailwind usa nomes de classes como drop-shadow-lg para declaração direta.

Nota: drop-shadow segue o canal alfa do elemento, tornando-o ideal para formas irregulares (como imagens PNG e SVGs). box-shadow cria uma sombra retangular, que é mais adequada para formas regulares.

Exemplo Abrangente

Combinando todos os conceitos acima, vamos criar uma demonstração completa de sombras e efeitos.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sombras e Efeitos - Exemplo Abrangente</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">
    <!-- Grade de cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <!-- Card básico -->
      <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">Card Básico</h3>
          <p class="text-gray-600 text-sm">Efeito de hover usando shadow-md e hover:shadow-xl</p>
        </div>
      </div>

      <!-- Card com gradiente -->
      <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">Card com Gradiente</h3>
          <p class="opacity-90 text-sm">Fundo em gradiente, sombra e animação ao passar o mouse</p>
        </div>
      </div>

      <!-- Card escuro -->
      <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">Nome de Usuário</div>
              <div class="text-gray-400 text-sm">@username</div>
            </div>
          </div>
          <p class="text-gray-300 text-sm">Card com tema escuro e borda de avatar estilo ring</p>
        </div>
      </div>
    </div>

    <!-- Banner com modo de mesclagem -->
    <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">Modos de Mesclagem Criativos</h2>
        <p class="text-xl opacity-90 drop-shadow">Efeito de sobreposição de imagem usando mix-blend-multiply</p>
      </div>
    </div>

    <!-- Empilhamento de opacidade -->
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h3 class="font-semibold mb-4">Empilhamento de Opacidade</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>

    <!-- Sombras de ícones -->
    <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">Início</div>
        </div>
        <div class="text-center">
          <div class="text-5xl drop-shadow-lg mb-2">👤</div>
          <div class="text-gray-400 text-sm">Usuário</div>
        </div>
        <div class="text-center">
          <div class="text-5xl drop-shadow-lg mb-2">⚙️</div>
          <div class="text-gray-400 text-sm">Configurações</div>
        </div>
        <div class="text-center">
          <div class="text-5xl drop-shadow-lg mb-2">📊</div>
          <div class="text-gray-400 text-sm">Dados</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional requer escrever CSS extenso para alcançar sombras de cards, banners com modos de mesclagem, empilhamento de opacidade e outros efeitos, enquanto o Tailwind realiza tudo isso diretamente no HTML usando classes utilitárias de sombra, opacidade e modo de mesclagem.

❓ Perguntas Frequentes

P: Qual é a diferença entre box-shadow e drop-shadow? R: box-shadow (shadow-) cria uma sombra retangular, adequada para formas regulares. drop-shadow (drop-shadow-) segue o canal alfa do elemento, tornando-o ideal para formas irregulares (PNGs, SVGs). drop-shadow tem desempenho ligeiramente inferior.

P: Como crio um estado desabilitado para um elemento? R: Use a combinação opacity-50 cursor-not-allowed. opacity-50 torna o elemento semi-transparente, e cursor-not-allowed exibe um cursor de proibido. Adicione pointer-events-none para desabilitar completamente a interação.

P: mix-blend-mode afeta elementos filhos? R: Sim. mix-blend-mode afeta como o elemento inteiro e seus filhos se mesclam com o conteúdo abaixo. Se você quer afetar apenas o fundo, separe o fundo e o conteúdo em camadas diferentes.

P: Como defino a opacidade da cor da sombra? R: Use a sintaxe shadow-blue-500/50. /50 significa 50% de opacidade. Você também pode usar valores como shadow-blue-500/25 (25% de opacidade). A cor padrão da sombra é preto.

📖 Resumo

📝 Exercícios

  1. ⭐ Crie um componente de card usando shadow-md e hover:shadow-xl para um efeito de sombra ao passar o mouse

  2. ⭐⭐ Crie uma galeria de imagens usando drop-shadow-lg para sombras de imagens e opacity-* para um efeito de fade-in ao passar o mouse

  3. ⭐⭐⭐ Crie um componente de banner usando uma imagem de fundo + sobreposição de gradiente mix-blend-multiply + sombra de texto drop-shadow-lg para um efeito visual profissional

100%