Tidadigi Logo

Tailwind CSS Backdrop Saturate

Lớp backdrop saturate là một hàm dựng sẵn trong CSS. Nó được dùng để tăng giảm độ bão hòa ảnh đầu vào. Tailwind CSS đã thêm tính năng brightness mới trong phiên bản 2.1.

Backdrop Saturate:

  • backdrop-saturate-0: Lớp này đặt độ bão hòa của phần tử thành CSS saturate(0).
  • backdrop-saturate-50: Lớp này đặt độ bão hòa của phần tử thành CSS saturate(50).
  • backdrop-saturate-100: Lớp này đặt độ bão hòa của phần tử thành CSS saturate(100).
  • backdrop-saturate-150: Lớp này đặt độ bão hòa của phần tử thành CSS saturate(150).
  • backdrop-saturate-200: Lớp này đặt độ bão hòa của phần tử thành CSS saturate(200).

Syntax:

<element class=
    "filter backdrop-saturate-{amount}">
</element>

Example:

HTML 
<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://unpkg.com/tailwindcss@^2.1/dist/tailwind.min.css"
    rel="stylesheet">
</head>

<body class="text-center mx-4 ">
  <h1 class="text-green-600 text-5xl font-bold">
      GeeksforGeeks
  </h1>

  <b>Tailwind CSS Backdrop Saturate Class</b>

  <div class=" mx-16 mt-18 h-36 relative">
    <div class="absolute w-full py-18">
      <img class="rounded-lg object-cover" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210605213323/Screenshot20210605213311.png" 
       alt="image">
    </div>
    
    <div class="relative h-32 flex overflow-x-auto space-x-4">
      <div class="flex-shrink-0 border-4 border-green-500 
           backdrop-filter backdrop-saturate-0 w-1/3">
      </div>

      <div class="flex-shrink-0 border-4 border-green-500 
           backdrop-filter backdrop-saturate-100 w-1/3">
      </div>

      <div class="flex-shrink-0 border-4 border-green-500 
           backdrop-filter backdrop-saturate-200 w-1/3">
      </div>
    </div>
    
  </div>
</body>

</html>


Output:

tailwind-css-backdrop-saturate
Last Updated : 20/07/2025