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

Tailwind CSS Filters & Transforms: Blur, Scale, Rotate & Translate

Filters

Filter utilities use the CSS filter property to add visual effects to elements.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Filter 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">
    <!-- 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>
▶ Try it Yourself

Filter class reference:

Class CSS Value Description
blur-0 filter: blur(0) No blur
blur-sm filter: blur(4px) Small blur
blur filter: blur(8px) Default blur
blur-md filter: blur(12px) Medium blur
blur-lg filter: blur(16px) Large blur
blur-xl filter: blur(24px) Extra large blur
blur-2xl filter: blur(40px) Extra extra large blur
blur-3xl filter: blur(64px) Extra extra extra large blur
brightness-0 filter: brightness(0) Completely dark
brightness-50 filter: brightness(0.5) 50% brightness
brightness-100 filter: brightness(1) 100% brightness (default)
brightness-150 filter: brightness(1.5) 150% brightness
contrast-0 filter: contrast(0) No contrast
contrast-50 filter: contrast(0.5) 50% contrast
contrast-100 filter: contrast(1) 100% contrast (default)
contrast-200 filter: contrast(2) 200% contrast
grayscale-0 filter: grayscale(0) No grayscale
grayscale filter: grayscale(100%) Full grayscale
sepia-0 filter: sepia(0) No sepia
sepia filter: sepia(100%) Full sepia
saturate-0 filter: saturate(0) No saturation
saturate-50 filter: saturate(0.5) 50% saturation
saturate-100 filter: saturate(1) 100% saturation (default)
saturate-200 filter: saturate(2) 200% saturation
hue-rotate-0 filter: hue-rotate(0deg) No hue rotation
hue-rotate-90 filter: hue-rotate(90deg) 90-degree hue rotation
hue-rotate-180 filter: hue-rotate(180deg) 180-degree hue rotation
invert-0 filter: invert(0) No inversion
invert filter: invert(100%) Full inversion

Traditional CSS vs Tailwind The traditional approach requires writing complex properties like filter: blur(8px) brightness(1.2) in CSS, whereas Tailwind uses class names like blur and brightness-120 to declare them directly.

Tip: Filters can be combined, e.g. blur-sm brightness-75 grayscale. Note that filter order affects the final result.

Transforms

Transform utilities use the CSS transform property to scale, rotate, translate, and skew elements.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transform 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">
    <!-- 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">Center</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">Origin</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>
▶ Try it Yourself

Transform class reference:

Class CSS Value Description
scale-0 transform: scale(0) Scale to 0
scale-50 transform: scale(0.5) Scale to 50%
scale-75 transform: scale(0.75) Scale to 75%
scale-90 transform: scale(0.9) Scale to 90%
scale-95 transform: scale(0.95) Scale to 95%
scale-100 transform: scale(1) Original size (default)
scale-105 transform: scale(1.05) Scale to 105%
scale-110 transform: scale(1.1) Scale to 110%
scale-125 transform: scale(1.25) Scale to 125%
scale-150 transform: scale(1.5) Scale to 150%
rotate-0 transform: rotate(0deg) No rotation
rotate-1 transform: rotate(1deg) Rotate 1 degree
rotate-2 transform: rotate(2deg) Rotate 2 degrees
rotate-3 transform: rotate(3deg) Rotate 3 degrees
rotate-6 transform: rotate(6deg) Rotate 6 degrees
rotate-12 transform: rotate(12deg) Rotate 12 degrees
rotate-45 transform: rotate(45deg) Rotate 45 degrees
rotate-90 transform: rotate(90deg) Rotate 90 degrees
rotate-180 transform: rotate(180deg) Rotate 180 degrees
translate-x-0 transform: translateX(0) No horizontal translation
translate-x-1 transform: translateX(0.25rem) Translate horizontally by 4px
translate-x-2 transform: translateX(0.5rem) Translate horizontally by 8px
translate-x-4 transform: translateX(1rem) Translate horizontally by 16px
translate-x-full transform: translateX(100%) Translate horizontally by 100%
-translate-x-1/2 transform: translateX(-50%) Translate horizontally by -50%
translate-y-0 transform: translateY(0) No vertical translation
translate-y-1 transform: translateY(0.25rem) Translate vertically by 4px
translate-y-full transform: translateY(100%) Translate vertically by 100%
-translate-y-1/2 transform: translateY(-50%) Translate vertically by -50%
skew-x-0 transform: skewX(0deg) No skew
skew-x-1 transform: skewX(1deg) Horizontal skew by 1 degree
skew-x-3 transform: skewX(3deg) Horizontal skew by 3 degrees
skew-x-6 transform: skewX(6deg) Horizontal skew by 6 degrees
skew-x-12 transform: skewX(12deg) Horizontal skew by 12 degrees
skew-y-0 transform: skewY(0deg) No skew
skew-y-1 transform: skewY(1deg) Vertical skew by 1 degree
skew-y-3 transform: skewY(3deg) Vertical skew by 3 degrees
skew-y-6 transform: skewY(6deg) Vertical skew by 6 degrees
skew-y-12 transform: skewY(12deg) Vertical skew by 12 degrees

Traditional CSS vs Tailwind The traditional approach requires writing complex properties like transform: scale(1.1) rotate(3deg) in CSS, whereas Tailwind uses class names like scale-110 rotate-3 to declare them directly. Negative values use the -translate-x-1/2 syntax.

Tip: Combining -translate-x-1/2 -translate-y-1/2 with left-1/2 top-1/2 achieves perfect horizontal and vertical centering.

Transform Origin (origin-*)

origin-* utilities set the origin point for transforms.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transform Origin 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">
    <!-- Origin positions -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Transform Origin</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">center (default)</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>

    <!-- Practical application -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Practical Application: Rotation Animation</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">
            Center
          </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">
            Top-left
          </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">
            Bottom-right
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Transform origin class reference:

Class CSS Value Description
origin-center transform-origin: center Center (default)
origin-top transform-origin: top Top center
origin-top-right transform-origin: top right Top-right corner
origin-right transform-origin: right Right center
origin-bottom-right transform-origin: bottom right Bottom-right corner
origin-bottom transform-origin: bottom Bottom center
origin-bottom-left transform-origin: bottom left Bottom-left corner
origin-left transform-origin: left Left center
origin-top-left transform-origin: top left Top-left corner

Traditional CSS vs Tailwind The traditional approach requires setting the transform-origin property in CSS, whereas Tailwind uses class names like origin-center and origin-top-left to declare it directly.

Tip: Transform origin affects the reference point for rotation and scaling. origin-top-left makes the element rotate from its top-left corner, while origin-center rotates from the center.

Backdrop Filters (backdrop-*)

backdrop-* utilities use the CSS backdrop-filter property to apply filter effects to the content behind 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>Backdrop Filter 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">
    <!-- 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>

    <!-- Practical Application: Frosted Glass -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Practical Application: Frosted Glass</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">Frosted Glass Effect</h4>
            <p class="text-white/80">Achieved with 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">
              Try Now
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Practical Application: Modal Backdrop -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Practical Application: Modal Backdrop</h3>
      <div class="relative h-64 rounded-lg overflow-hidden" style="background-image: url('https://picsum.photos/600/300'); background-size: cover;">
        <!-- Modal overlay -->
        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>
        <!-- Modal content -->
        <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">Background blur achieved with 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">Cancel</button>
              <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Confirm</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Backdrop filter class reference:

Class CSS Value Description
backdrop-blur-0 backdrop-filter: blur(0) No backdrop blur
backdrop-blur-sm backdrop-filter: blur(4px) Small backdrop blur
backdrop-blur backdrop-filter: blur(8px) Default backdrop blur
backdrop-blur-md backdrop-filter: blur(12px) Medium backdrop blur
backdrop-blur-lg backdrop-filter: blur(16px) Large backdrop blur
backdrop-blur-xl backdrop-filter: blur(24px) Extra large backdrop blur
backdrop-blur-2xl backdrop-filter: blur(40px) Extra extra large backdrop blur
backdrop-blur-3xl backdrop-filter: blur(64px) Extra extra extra large backdrop blur
backdrop-brightness-0 backdrop-filter: brightness(0) Completely dark backdrop
backdrop-brightness-50 backdrop-filter: brightness(0.5) 50% backdrop brightness
backdrop-brightness-100 backdrop-filter: brightness(1) 100% backdrop brightness
backdrop-brightness-150 backdrop-filter: brightness(1.5) 150% backdrop brightness
backdrop-contrast-0 backdrop-filter: contrast(0) No backdrop contrast
backdrop-contrast-100 backdrop-filter: contrast(1) 100% backdrop contrast
backdrop-grayscale-0 backdrop-filter: grayscale(0) No backdrop grayscale
backdrop-grayscale backdrop-filter: grayscale(100%) Full backdrop grayscale
backdrop-hue-rotate-0 backdrop-filter: hue-rotate(0deg) No backdrop hue rotation
backdrop-hue-rotate-90 backdrop-filter: hue-rotate(90deg) 90-degree backdrop hue rotation
backdrop-invert-0 backdrop-filter: invert(0) No backdrop inversion
backdrop-invert backdrop-filter: invert(100%) Full backdrop inversion
backdrop-opacity-0 backdrop-filter: opacity(0) Fully transparent backdrop
backdrop-opacity-50 backdrop-filter: opacity(0.5) 50% backdrop opacity
backdrop-opacity-100 backdrop-filter: opacity(1) 100% backdrop opacity
backdrop-saturate-0 backdrop-filter: saturate(0) No backdrop saturation
backdrop-saturate-100 backdrop-filter: saturate(1) 100% backdrop saturation
backdrop-saturate-200 backdrop-filter: saturate(2) 200% backdrop saturation
backdrop-sepia-0 backdrop-filter: sepia(0) No backdrop sepia
backdrop-sepia backdrop-filter: sepia(100%) Full backdrop sepia

Traditional CSS vs Tailwind The traditional approach requires writing complex properties like backdrop-filter: blur(16px) brightness(0.8) in CSS, whereas Tailwind uses class names like backdrop-blur-lg backdrop-brightness-75 to declare them directly.

Note: backdrop-filter requires the element to have background transparency for the effect to be visible. It is typically combined with bg-white/20 or bg-black/50. Some browsers require the -webkit- prefix.

Comprehensive Example

Combining all the concepts above, here is a complete filters and transforms example.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Filters & Transforms 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">
    <!-- Image Gallery -->
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h3 class="font-semibold mb-4">Image Gallery (Filter Effects)</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="Grayscale" 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">Grayscale -> Color</p>
        </div>
        <div class="group cursor-pointer">
          <img src="https://picsum.photos/200/200?random=3" alt="Sepia" 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">Sepia -> Color</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 -> Clear</p>
        </div>
      </div>
    </div>

    <!-- Card Hover Effects -->
    <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="Card" 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">Scale Effect</h4>
          </div>
        </div>
        <div class="p-4">
          <p class="text-gray-600 text-sm">Image zooms on hover</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="Card" 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">Rotation Effect</h4>
          </div>
        </div>
        <div class="p-4">
          <p class="text-gray-600 text-sm">Image rotates on hover</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="Card" 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">Brightness Effect</h4>
          </div>
        </div>
        <div class="p-4">
          <p class="text-gray-600 text-sm">Brightness increases on hover</p>
        </div>
      </div>
    </div>

    <!-- Frosted Glass Navbar -->
    <div class="relative h-96 rounded-xl overflow-hidden" style="background-image: url('https://picsum.photos/800/400'); background-size: cover; background-position: center;">
      <!-- Navbar -->
      <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">Home</a>
            <a href="#" class="text-white/80 hover:text-white transition-colors">Products</a>
            <a href="#" class="text-white/80 hover:text-white transition-colors">About</a>
          </div>
        </div>
      </nav>
      <!-- Content -->
      <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">Frosted Glass Effect</h2>
          <p class="text-xl opacity-90 drop-shadow">Achieved with backdrop-blur-lg</p>
        </div>
      </div>
    </div>

    <!-- Transform Combinations -->
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h3 class="font-semibold mb-4">Transform Combinations</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">
          scale + rotate
        </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">
          scale + rotate
        </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">
          skew + scale
        </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">
          Combined
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires writing extensive CSS to achieve image gallery hover effects, frosted glass navigation bars, and transform combinations, whereas Tailwind uses filter and transform utility classes to accomplish everything directly in HTML.

❓ FAQ

Q What is the difference between filter and backdrop-filter?
A filter affects the element itself and its content. backdrop-filter affects the content behind the element, and requires the element to have background transparency to see the effect. It is commonly used for frosted glass effects.
Q Can multiple transforms be combined?
A Yes. Tailwind supports combining multiple transform classes, e.g. scale-110 rotate-6 translate-x-4. Note that transform order affects the final result.
Q How do I achieve smooth transform animations?
A Use transition-all duration-300 or transition-transform duration-500 classes. transition-all transitions all properties, while transition-transform only transitions transform properties.
Q Why can't I see the backdrop-blur effect?
A backdrop-blur requires the element to have background transparency to be visible. Make sure to use a semi-transparent background like bg-white/20 or bg-black/50. Also ensure your browser supports the backdrop-filter property.

📖 Summary

📝 Exercises

  1. ⭐ Create an image gallery using grayscale and hover:grayscale-0 to achieve a grayscale-to-color effect on hover

  2. ⭐⭐ Create a card component using hover:scale-105 hover:shadow-xl transition-all to achieve a zoom and shadow effect on hover

  3. ⭐⭐⭐ Create a frosted glass login popup using backdrop-blur-lg bg-white/20 for background blur, combined with scale-95 hover:scale-100 for hover zoom animation

100%

🙏 帮我们做得更好

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

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