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

Filtros e Transformações Tailwind CSS: Blur, Scale, Rotate e Translate

Filtros

As utilidades de filtro usam a propriedade CSS filter para adicionar efeitos visuais aos elementos.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Filtros</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">
    <!-- blur -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">blur</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="blur-0" class="rounded-lg blur-0">
          <p class="text-sm mt-2">blur-0</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="blur-sm" class="rounded-lg blur-sm">
          <p class="text-sm mt-2">blur-sm</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="blur" class="rounded-lg blur">
          <p class="text-sm mt-2">blur</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="blur-md" class="rounded-lg blur-md">
          <p class="text-sm mt-2">blur-md</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="blur-lg" class="rounded-lg blur-lg">
          <p class="text-sm mt-2">blur-lg</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="blur-xl" class="rounded-lg blur-xl">
          <p class="text-sm mt-2">blur-xl</p>
        </div>
      </div>
    </div>

    <!-- brightness -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">brightness</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="brightness-50" class="rounded-lg brightness-50">
          <p class="text-sm mt-2">brightness-50</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="brightness-75" class="rounded-lg brightness-75">
          <p class="text-sm mt-2">brightness-75</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="brightness-100" class="rounded-lg brightness-100">
          <p class="text-sm mt-2">brightness-100</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="brightness-125" class="rounded-lg brightness-125">
          <p class="text-sm mt-2">brightness-125</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="brightness-150" class="rounded-lg brightness-150">
          <p class="text-sm mt-2">brightness-150</p>
        </div>
      </div>
    </div>

    <!-- contrast -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">contrast</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="contrast-50" class="rounded-lg contrast-50">
          <p class="text-sm mt-2">contrast-50</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="contrast-100" class="rounded-lg contrast-100">
          <p class="text-sm mt-2">contrast-100</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="contrast-150" class="rounded-lg contrast-150">
          <p class="text-sm mt-2">contrast-150</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="contrast-200" class="rounded-lg contrast-200">
          <p class="text-sm mt-2">contrast-200</p>
        </div>
      </div>
    </div>

    <!-- grayscale -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grayscale</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="grayscale-0" class="rounded-lg grayscale-0">
          <p class="text-sm mt-2">grayscale-0</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="grayscale" class="rounded-lg grayscale">
          <p class="text-sm mt-2">grayscale</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="grayscale-50" class="rounded-lg grayscale-[50%]">
          <p class="text-sm mt-2">grayscale-50%</p>
        </div>
      </div>
    </div>

    <!-- sepia -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">sepia</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="sepia-0" class="rounded-lg sepia-0">
          <p class="text-sm mt-2">sepia-0</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="sepia" class="rounded-lg sepia">
          <p class="text-sm mt-2">sepia</p>
        </div>
      </div>
    </div>

    <!-- saturate -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">saturate</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="saturate-0" class="rounded-lg saturate-0">
          <p class="text-sm mt-2">saturate-0</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="saturate-50" class="rounded-lg saturate-50">
          <p class="text-sm mt-2">saturate-50</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="saturate-100" class="rounded-lg saturate-100">
          <p class="text-sm mt-2">saturate-100</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="saturate-150" class="rounded-lg saturate-150">
          <p class="text-sm mt-2">saturate-150</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="saturate-200" class="rounded-lg saturate-200">
          <p class="text-sm mt-2">saturate-200</p>
        </div>
      </div>
    </div>

    <!-- hue-rotate -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">hue-rotate</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="hue-rotate-0" class="rounded-lg hue-rotate-0">
          <p class="text-sm mt-2">hue-rotate-0</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="hue-rotate-90" class="rounded-lg hue-rotate-90">
          <p class="text-sm mt-2">hue-rotate-90</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="hue-rotate-180" class="rounded-lg hue-rotate-180">
          <p class="text-sm mt-2">hue-rotate-180</p>
        </div>
      </div>
    </div>

    <!-- invert -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">invert</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="invert-0" class="rounded-lg invert-0">
          <p class="text-sm mt-2">invert-0</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="invert" class="rounded-lg invert">
          <p class="text-sm mt-2">invert</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Referência de classes de filtro:

Classe Valor CSS Descrição
blur-0 filter: blur(0) Sem blur
blur-sm filter: blur(4px) Blur pequeno
blur filter: blur(8px) Blur padrão
blur-md filter: blur(12px) Blur médio
blur-lg filter: blur(16px) Blur grande
blur-xl filter: blur(24px) Blur extra grande
blur-2xl filter: blur(40px) Blur gigante
blur-3xl filter: blur(64px) Blur colossal
brightness-0 filter: brightness(0) Completamente escuro
brightness-50 filter: brightness(0.5) 50% de brilho
brightness-100 filter: brightness(1) 100% de brilho (padrão)
brightness-150 filter: brightness(1.5) 150% de brilho
contrast-0 filter: contrast(0) Sem contraste
contrast-50 filter: contrast(0.5) 50% de contraste
contrast-100 filter: contrast(1) 100% de contraste (padrão)
contrast-200 filter: contrast(2) 200% de contraste
grayscale-0 filter: grayscale(0) Sem escala de cinza
grayscale filter: grayscale(100%) Escala de cinza completa
sepia-0 filter: sepia(0) Sem sépia
sepia filter: sepia(100%) Sépia completo
saturate-0 filter: saturate(0) Sem saturação
saturate-50 filter: saturate(0.5) 50% de saturação
saturate-100 filter: saturate(1) 100% de saturação (padrão)
saturate-200 filter: saturate(2) 200% de saturação
hue-rotate-0 filter: hue-rotate(0deg) Sem rotação de matiz
hue-rotate-90 filter: hue-rotate(90deg) Rotação de matiz de 90 graus
hue-rotate-180 filter: hue-rotate(180deg) Rotação de matiz de 180 graus
invert-0 filter: invert(0) Sem inversão
invert filter: invert(100%) Inversão completa

CSS Tradicional vs Tailwind A abordagem tradicional exige escrever propriedades complexas como filter: blur(8px) brightness(1.2) no CSS, enquanto o Tailwind usa nomes de classes como blur e brightness-120 para declará-los diretamente.

💡 Dica: Os filtros podem ser combinados, por exemplo blur-sm brightness-75 grayscale. Observe que a ordem dos filtros afeta o resultado final.

Transformações

As utilidades de transformação usam a propriedade CSS transform para dimensionar, rotacionar, transladar e inclinar elementos.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Transformações</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">
    <!-- scale -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">scale</h3>
      <div class="flex flex-wrap gap-8 items-center justify-center">
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-50 flex items-center justify-center text-white text-xs">scale-50</div>
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-75 flex items-center justify-center text-white text-xs">scale-75</div>
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-100 flex items-center justify-center text-white text-xs">scale-100</div>
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-110 flex items-center justify-center text-white text-xs">scale-110</div>
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-125 flex items-center justify-center text-white text-xs">scale-125</div>
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-150 flex items-center justify-center text-white text-xs">scale-150</div>
      </div>
    </div>

    <!-- rotate -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">rotate</h3>
      <div class="flex flex-wrap gap-8 items-center justify-center">
        <div class="w-24 h-24 bg-green-500 rounded-lg rotate-0 flex items-center justify-center text-white text-xs">rotate-0</div>
        <div class="w-24 h-24 bg-green-500 rounded-lg rotate-3 flex items-center justify-center text-white text-xs">rotate-3</div>
        <div class="w-24 h-24 bg-green-500 rounded-lg rotate-6 flex items-center justify-center text-white text-xs">rotate-6</div>
        <div class="w-24 h-24 bg-green-500 rounded-lg rotate-12 flex items-center justify-center text-white text-xs">rotate-12</div>
        <div class="w-24 h-24 bg-green-500 rounded-lg rotate-45 flex items-center justify-center text-white text-xs">rotate-45</div>
        <div class="w-24 h-24 bg-green-500 rounded-lg rotate-90 flex items-center justify-center text-white text-xs">rotate-90</div>
      </div>
    </div>

    <!-- translate -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">translate</h3>
      <div class="relative h-48 bg-gray-100 rounded-lg">
        <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-24 h-24 bg-purple-500 rounded-lg flex items-center justify-center text-white text-xs">Centro</div>
        <div class="absolute left-4 top-4 w-20 h-20 bg-purple-400 rounded-lg translate-x-0 translate-y-0 flex items-center justify-center text-white text-xs">Origem</div>
        <div class="absolute left-4 top-4 w-20 h-20 bg-purple-600 rounded-lg translate-x-8 translate-y-8 flex items-center justify-center text-white text-xs">+8</div>
        <div class="absolute right-4 top-4 w-20 h-20 bg-purple-700 rounded-lg -translate-x-4 translate-y-4 flex items-center justify-center text-white text-xs">-4,+4</div>
      </div>
    </div>

    <!-- skew -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">skew</h3>
      <div class="flex flex-wrap gap-8 items-center justify-center">
        <div class="w-24 h-24 bg-orange-500 rounded-lg skew-x-0 flex items-center justify-center text-white text-xs">skew-x-0</div>
        <div class="w-24 h-24 bg-orange-500 rounded-lg skew-x-3 flex items-center justify-center text-white text-xs">skew-x-3</div>
        <div class="w-24 h-24 bg-orange-500 rounded-lg skew-x-6 flex items-center justify-center text-white text-xs">skew-x-6</div>
        <div class="w-24 h-24 bg-orange-500 rounded-lg skew-x-12 flex items-center justify-center text-white text-xs">skew-x-12</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Referência de classes de transformação:

Classe Valor CSS Descrição
scale-0 transform: scale(0) Escala para 0
scale-50 transform: scale(0.5) Escala para 50%
scale-75 transform: scale(0.75) Escala para 75%
scale-90 transform: scale(0.9) Escala para 90%
scale-95 transform: scale(0.95) Escala para 95%
scale-100 transform: scale(1) Tamanho original (padrão)
scale-105 transform: scale(1.05) Escala para 105%
scale-110 transform: scale(1.1) Escala para 110%
scale-125 transform: scale(1.25) Escala para 125%
scale-150 transform: scale(1.5) Escala para 150%
rotate-0 transform: rotate(0deg) Sem rotação
rotate-1 transform: rotate(1deg) Rotacionar 1 grau
rotate-2 transform: rotate(2deg) Rotacionar 2 graus
rotate-3 transform: rotate(3deg) Rotacionar 3 graus
rotate-6 transform: rotate(6deg) Rotacionar 6 graus
rotate-12 transform: rotate(12deg) Rotacionar 12 graus
rotate-45 transform: rotate(45deg) Rotacionar 45 graus
rotate-90 transform: rotate(90deg) Rotacionar 90 graus
rotate-180 transform: rotate(180deg) Rotacionar 180 graus
translate-x-0 transform: translateX(0) Sem translação horizontal
translate-x-1 transform: translateX(0.25rem) Transladar horizontalmente 4px
translate-x-2 transform: translateX(0.5rem) Transladar horizontalmente 8px
translate-x-4 transform: translateX(1rem) Transladar horizontalmente 16px
translate-x-full transform: translateX(100%) Transladar horizontalmente 100%
-translate-x-1/2 transform: translateX(-50%) Transladar horizontalmente -50%
translate-y-0 transform: translateY(0) Sem translação vertical
translate-y-1 transform: translateY(0.25rem) Transladar verticalmente 4px
translate-y-full transform: translateY(100%) Transladar verticalmente 100%
-translate-y-1/2 transform: translateY(-50%) Transladar verticalmente -50%
skew-x-0 transform: skewX(0deg) Sem inclinação
skew-x-1 transform: skewX(1deg) Inclinação horizontal de 1 grau
skew-x-3 transform: skewX(3deg) Inclinação horizontal de 3 graus
skew-x-6 transform: skewX(6deg) Inclinação horizontal de 6 graus
skew-x-12 transform: skewX(12deg) Inclinação horizontal de 12 graus
skew-y-0 transform: skewY(0deg) Sem inclinação
skew-y-1 transform: skewY(1deg) Inclinação vertical de 1 grau
skew-y-3 transform: skewY(3deg) Inclinação vertical de 3 graus
skew-y-6 transform: skewY(6deg) Inclinação vertical de 6 graus
skew-y-12 transform: skewY(12deg) Inclinação vertical de 12 graus

CSS Tradicional vs Tailwind A abordagem tradicional exige escrever propriedades complexas como transform: scale(1.1) rotate(3deg) no CSS, enquanto o Tailwind usa nomes de classes como scale-110 rotate-3 para declará-los diretamente. Valores negativos usam a sintaxe -translate-x-1/2.

💡 Dica: Combinar -translate-x-1/2 -translate-y-1/2 com left-1/2 top-1/2 permite o perfeito centralizado horizontal e vertical.

Origem da Transformação (origin-*)

As utilidades origin-* definem o ponto de origem para as transformações.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Origem da Transformação</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">
    <!-- Posições de origem -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Origem da Transformação</h3>
      <div class="flex flex-wrap gap-8 items-center justify-center">
        <div class="text-center">
          <div class="w-24 h-24 bg-blue-500 rounded-lg rotate-45 origin-center flex items-center justify-center text-white text-xs">origin-center</div>
          <p class="text-sm mt-2">centro (padrão)</p>
        </div>
        <div class="text-center">
          <div class="w-24 h-24 bg-green-500 rounded-lg rotate-45 origin-top-left flex items-center justify-center text-white text-xs">origin-top</div>
          <p class="text-sm mt-2">origin-top-left</p>
        </div>
        <div class="text-center">
          <div class="w-24 h-24 bg-purple-500 rounded-lg rotate-45 origin-top-right flex items-center justify-center text-white text-xs">origin-top</div>
          <p class="text-sm mt-2">origin-top-right</p>
        </div>
        <div class="text-center">
          <div class="w-24 h-24 bg-orange-500 rounded-lg rotate-45 origin-bottom-left flex items-center justify-center text-white text-xs">origin-bottom</div>
          <p class="text-sm mt-2">origin-bottom-left</p>
        </div>
        <div class="text-center">
          <div class="w-24 h-24 bg-red-500 rounded-lg rotate-45 origin-bottom-right flex items-center justify-center text-white text-xs">origin-bottom</div>
          <p class="text-sm mt-2">origin-bottom-right</p>
        </div>
      </div>
    </div>

    <!-- Aplicação prática -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Aplicação Prática: Animação de Rotação</h3>
      <div class="flex gap-8 items-center justify-center">
        <div class="text-center">
          <div class="w-16 h-16 bg-blue-500 rounded-lg hover:rotate-45 origin-center transition-transform duration-300 flex items-center justify-center text-white cursor-pointer">
            Centro
          </div>
        </div>
        <div class="text-center">
          <div class="w-16 h-16 bg-green-500 rounded-lg hover:rotate-45 origin-top-left transition-transform duration-300 flex items-center justify-center text-white cursor-pointer">
            Superior esquerdo
          </div>
        </div>
        <div class="text-center">
          <div class="w-16 h-16 bg-purple-500 rounded-lg hover:rotate-45 origin-bottom-right transition-transform duration-300 flex items-center justify-center text-white cursor-pointer">
            Inferior direito
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Referência de classes de origem da transformação:

Classe Valor CSS Descrição
origin-center transform-origin: center Centro (padrão)
origin-top transform-origin: top Centro superior
origin-top-right transform-origin: top right Canto superior direito
origin-right transform-origin: right Centro direito
origin-bottom-right transform-origin: bottom right Canto inferior direito
origin-bottom transform-origin: bottom Centro inferior
origin-bottom-left transform-origin: bottom left Canto inferior esquerdo
origin-left transform-origin: left Centro esquerdo
origin-top-left transform-origin: top left Canto superior esquerdo

CSS Tradicional vs Tailwind A abordagem tradicional exige definir a propriedade transform-origin no CSS, enquanto o Tailwind usa nomes de classes como origin-center e origin-top-left para declará-la diretamente.

💡 Dica: A origem da transformação afeta o ponto de referência para rotação e escala. origin-top-left faz o elemento rotacionar a partir do seu canto superior esquerdo, enquanto origin-center rotaciona a partir do centro.

Filtros de Fundo (backdrop-*)

As utilidades backdrop-* usam a propriedade CSS backdrop-filter para aplicar efeitos de filtro ao conteúdo atrás de um elemento.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Filtro de Fundo</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">
    <!-- backdrop-blur -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">backdrop-blur</h3>
      <div class="relative h-48 rounded-lg overflow-hidden" style="background-image: url('https://picsum.photos/400/200'); background-size: cover;">
        <div class="absolute inset-0 flex items-center justify-center gap-4">
          <div class="bg-white/30 backdrop-blur-sm px-6 py-3 rounded-lg text-center">
            <div class="font-semibold">blur-sm</div>
          </div>
          <div class="bg-white/30 backdrop-blur px-6 py-3 rounded-lg text-center">
            <div class="font-semibold">blur</div>
          </div>
          <div class="bg-white/30 backdrop-blur-md px-6 py-3 rounded-lg text-center">
            <div class="font-semibold">blur-md</div>
          </div>
          <div class="bg-white/30 backdrop-blur-lg px-6 py-3 rounded-lg text-center">
            <div class="font-semibold">blur-lg</div>
          </div>
          <div class="bg-white/30 backdrop-blur-xl px-6 py-3 rounded-lg text-center">
            <div class="font-semibold">blur-xl</div>
          </div>
        </div>
      </div>
    </div>

    <!-- backdrop-brightness -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">backdrop-brightness</h3>
      <div class="relative h-48 rounded-lg overflow-hidden" style="background-image: url('https://picsum.photos/400/200'); background-size: cover;">
        <div class="absolute inset-0 flex items-center justify-center gap-4">
          <div class="bg-black/30 backdrop-brightness-50 px-6 py-3 rounded-lg text-white text-center">
            <div class="font-semibold">brightness-50</div>
          </div>
          <div class="bg-black/30 backdrop-brightness-75 px-6 py-3 rounded-lg text-white text-center">
            <div class="font-semibold">brightness-75</div>
          </div>
          <div class="bg-black/30 backdrop-brightness-100 px-6 py-3 rounded-lg text-white text-center">
            <div class="font-semibold">brightness-100</div>
          </div>
          <div class="bg-black/30 backdrop-brightness-125 px-6 py-3 rounded-lg text-white text-center">
            <div class="font-semibold">brightness-125</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Aplicação prática: Vidro Fosco -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Aplicação Prática: Vidro Fosco</h3>
      <div class="relative h-64 rounded-lg overflow-hidden" style="background-image: url('https://picsum.photos/600/300'); background-size: cover;">
        <div class="absolute inset-0 flex items-center justify-center">
          <div class="bg-white/20 backdrop-blur-lg rounded-2xl p-8 text-center shadow-xl">
            <h4 class="text-2xl font-bold text-white mb-2">Efeito Vidro Fosco</h4>
            <p class="text-white/80">Alcançado com backdrop-blur-lg</p>
            <button class="mt-4 bg-white/30 hover:bg-white/50 text-white px-6 py-2 rounded-full transition-colors">
              Experimente Agora
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Aplicação prática: Fundo do Modal -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Aplicação Prática: Fundo do Modal</h3>
      <div class="relative h-64 rounded-lg overflow-hidden" style="background-image: url('https://picsum.photos/600/300'); background-size: cover;">
        <!-- Sobreposição do modal -->
        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>
        <!-- Conteúdo do modal -->
        <div class="absolute inset-0 flex items-center justify-center">
          <div class="bg-white rounded-xl p-6 w-80 shadow-2xl">
            <h4 class="text-xl font-semibold mb-2">Modal</h4>
            <p class="text-gray-600 mb-4">Blur de fundo alcançado com backdrop-blur-sm</p>
            <div class="flex justify-end gap-3">
              <button class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded">Cancelar</button>
              <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Confirmar</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Referência de classes de filtro de fundo:

Classe Valor CSS Descrição
backdrop-blur-0 backdrop-filter: blur(0) Sem blur de fundo
backdrop-blur-sm backdrop-filter: blur(4px) Blur de fundo pequeno
backdrop-blur backdrop-filter: blur(8px) Blur de fundo padrão
backdrop-blur-md backdrop-filter: blur(12px) Blur de fundo médio
backdrop-blur-lg backdrop-filter: blur(16px) Blur de fundo grande
backdrop-blur-xl backdrop-filter: blur(24px) Blur de fundo extra grande
backdrop-blur-2xl backdrop-filter: blur(40px) Blur de fundo gigante
backdrop-blur-3xl backdrop-filter: blur(64px) Blur de fundo colossal
backdrop-brightness-0 backdrop-filter: brightness(0) Fundo completamente escuro
backdrop-brightness-50 backdrop-filter: brightness(0.5) 50% de brilho no fundo
backdrop-brightness-100 backdrop-filter: brightness(1) 100% de brilho no fundo
backdrop-brightness-150 backdrop-filter: brightness(1.5) 150% de brilho no fundo
backdrop-contrast-0 backdrop-filter: contrast(0) Sem contraste no fundo
backdrop-contrast-100 backdrop-filter: contrast(1) 100% de contraste no fundo
backdrop-grayscale-0 backdrop-filter: grayscale(0) Sem escala de cinza no fundo
backdrop-grayscale backdrop-filter: grayscale(100%) Escala de cinza completa no fundo
backdrop-hue-rotate-0 backdrop-filter: hue-rotate(0deg) Sem rotação de matiz no fundo
backdrop-hue-rotate-90 backdrop-filter: hue-rotate(90deg) Rotação de matiz de 90 graus no fundo
backdrop-invert-0 backdrop-filter: invert(0) Sem inversão no fundo
backdrop-invert backdrop-filter: invert(100%) Inversão completa no fundo
backdrop-opacity-0 backdrop-filter: opacity(0) Fundo totalmente transparente
backdrop-opacity-50 backdrop-filter: opacity(0.5) 50% de opacidade no fundo
backdrop-opacity-100 backdrop-filter: opacity(1) 100% de opacidade no fundo
backdrop-saturate-0 backdrop-filter: saturate(0) Sem saturação no fundo
backdrop-saturate-100 backdrop-filter: saturate(1) 100% de saturação no fundo
backdrop-saturate-200 backdrop-filter: saturate(2) 200% de saturação no fundo
backdrop-sepia-0 backdrop-filter: sepia(0) Sem sépia no fundo
backdrop-sepia backdrop-filter: sepia(100%) Sépia completo no fundo

CSS Tradicional vs Tailwind A abordagem tradicional exige escrever propriedades complexas como backdrop-filter: blur(16px) brightness(0.8) no CSS, enquanto o Tailwind usa nomes de classes como backdrop-blur-lg backdrop-brightness-75 para declará-los diretamente.

⚠️ Nota: O backdrop-filter exige que o elemento tenha transparência no fundo para que o efeito seja visível. Normalmente é combinado com bg-white/20 ou bg-black/50. Alguns navegadores exigem o prefixo -webkit-.

Exemplo Abrangente

Combinando todos os conceitos acima, aqui está um exemplo completo de filtros e transformações.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo Abrangente de Filtros e Transformações</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">
    <!-- Galeria de Imagens -->
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h3 class="font-semibold mb-4">Galeria de Imagens (Efeitos de Filtro)</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="group cursor-pointer">
          <img src="https://picsum.photos/200/200?random=1" alt="Original" class="rounded-lg w-full group-hover:scale-105 transition-transform duration-300">
          <p class="text-sm text-center mt-2">Original</p>
        </div>
        <div class="group cursor-pointer">
          <img src="https://picsum.photos/200/200?random=2" alt="Escala de Cinza" class="rounded-lg w-full grayscale group-hover:grayscale-0 group-hover:scale-105 transition-all duration-300">
          <p class="text-sm text-center mt-2">Escala de Cinza -> Cor</p>
        </div>
        <div class="group cursor-pointer">
          <img src="https://picsum.photos/200/200?random=3" alt="Sépia" class="rounded-lg w-full sepia group-hover:sepia-0 group-hover:scale-105 transition-all duration-300">
          <p class="text-sm text-center mt-2">Sépia -> Cor</p>
        </div>
        <div class="group cursor-pointer">
          <img src="https://picsum.photos/200/200?random=4" alt="Blur" class="rounded-lg w-full blur-sm group-hover:blur-0 group-hover:scale-105 transition-all duration-300">
          <p class="text-sm text-center mt-2">Blur -> Nítido</p>
        </div>
      </div>
    </div>

    <!-- Efeitos de Hover nos Cartões -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="bg-white rounded-xl shadow-lg overflow-hidden group cursor-pointer">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/200?random=5" alt="Cartão" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
          <div class="absolute bottom-4 left-4 text-white">
            <h4 class="font-semibold">Efeito de Escala</h4>
          </div>
        </div>
        <div class="p-4">
          <p class="text-gray-600 text-sm">Imagem amplia ao passar o mouse</p>
        </div>
      </div>

      <div class="bg-white rounded-xl shadow-lg overflow-hidden group cursor-pointer">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/200?random=6" alt="Cartão" class="w-full h-full object-cover group-hover:rotate-3 transition-transform duration-500 origin-center">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
          <div class="absolute bottom-4 left-4 text-white">
            <h4 class="font-semibold">Efeito de Rotação</h4>
          </div>
        </div>
        <div class="p-4">
          <p class="text-gray-600 text-sm">Imagem rotaciona ao passar o mouse</p>
        </div>
      </div>

      <div class="bg-white rounded-xl shadow-lg overflow-hidden group cursor-pointer">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/200?random=7" alt="Cartão" class="w-full h-full object-cover group-hover:brightness-125 transition-all duration-500">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
          <div class="absolute bottom-4 left-4 text-white">
            <h4 class="font-semibold">Efeito de Brilho</h4>
          </div>
        </div>
        <div class="p-4">
          <p class="text-gray-600 text-sm">Brilho aumenta ao passar o mouse</p>
        </div>
      </div>
    </div>

    <!-- Barra de Navegação com Vidro Fosco -->
    <div class="relative h-96 rounded-xl overflow-hidden" style="background-image: url('https://picsum.photos/800/400'); background-size: cover; background-position: center;">
      <!-- Barra de navegação -->
      <nav class="absolute top-0 left-0 right-0 bg-white/10 backdrop-blur-lg border-b border-white/20">
        <div class="flex justify-between items-center px-6 py-4">
          <div class="text-white font-bold text-xl">Logo</div>
          <div class="flex gap-6">
            <a href="#" class="text-white/80 hover:text-white transition-colors">Início</a>
            <a href="#" class="text-white/80 hover:text-white transition-colors">Produtos</a>
            <a href="#" class="text-white/80 hover:text-white transition-colors">Sobre</a>
          </div>
        </div>
      </nav>
      <!-- Conteúdo -->
      <div class="absolute inset-0 flex items-center justify-center">
        <div class="text-center text-white">
          <h2 class="text-4xl font-bold mb-4 drop-shadow-lg">Efeito Vidro Fosco</h2>
          <p class="text-xl opacity-90 drop-shadow">Alcançado com backdrop-blur-lg</p>
        </div>
      </div>
    </div>

    <!-- Combinações de Transformação -->
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h3 class="font-semibold mb-4">Combinações de Transformação</h3>
      <div class="flex flex-wrap gap-8 items-center justify-center">
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-110 rotate-6 shadow-lg flex items-center justify-center text-white text-xs">
          escala + rotação
        </div>
        <div class="w-24 h-24 bg-green-500 rounded-lg scale-90 -rotate-12 shadow-lg flex items-center justify-center text-white text-xs">
          escala + rotação
        </div>
        <div class="w-24 h-24 bg-purple-500 rounded-lg skew-x-6 scale-105 shadow-lg flex items-center justify-center text-white text-xs">
          inclinação + escala
        </div>
        <div class="w-24 h-24 bg-orange-500 rounded-lg -skew-x-3 rotate-3 translate-y-2 shadow-lg flex items-center justify-center text-white text-xs">
          Combinado
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional exige escrever bastante CSS para alcançar efeitos de hover em galerias de imagens, barras de navegação com vidro fosco e combinações de transformações, enquanto o Tailwind usa utilidades de filtro e transformação para fazer tudo diretamente no HTML.

❓ Perguntas Frequentes

P: Qual é a diferença entre filter e backdrop-filter? R: O filter afeta o próprio elemento e seu conteúdo. O backdrop-filter afeta o conteúdo atrás do elemento e exige que o elemento tenha transparência no fundo para que o efeito seja visível. É comumente usado para efeitos de vidro fosco.

P: Várias transformações podem ser combinadas? R: Sim. O Tailwind suporta combinar múltiplas classes de transformação, por exemplo scale-110 rotate-6 translate-x-4. Observe que a ordem das transformações afeta o resultado final.

P: Como alcançar animações suaves de transformação? R: Use as classes transition-all duration-300 ou transition-transform duration-500. A transition-all faz a transição de todas as propriedades, enquanto transition-transform faz a transição apenas das propriedades de transformação.

P: Por que não consigo ver o efeito de backdrop-blur? R: O backdrop-blur exige que o elemento tenha transparência no fundo para ser visível. Certifique-se de usar um fundo semitransparente como bg-white/20 ou bg-black/50. Além disso, verifique se seu navegador suporta a propriedade backdrop-filter.

📖 Resumo

📝 Exercícios

  1. ⭐ Crie uma galeria de imagens usando grayscale e hover:grayscale-0 para alcançar um efeito de escala de cinza para cor ao passar o mouse

  2. ⭐⭐ Crie um componente de cartão usando hover:scale-105 hover:shadow-xl transition-all para alcançar um efeito de zoom e sombra ao passar o mouse

  3. ⭐⭐⭐ Crie um popup de login com vidro fosco usando backdrop-blur-lg bg-white/20 para o blur de fundo, combinado com scale-95 hover:scale-100 para a animação de zoom ao passar o mouse

100%