Tidadigi Logo

Tailwind CSS Grayscale

Lớp Grayscale dùng để áp dụng bộ lọc sắc xám cho hình ảnh. Trong CSS, ta dùng CSS grayscale() Function. Tailwind CSS đã thêm tính năng brightness trong phiên bản 2.1.

Grayscale:

  1. grayscale-0: Lớp này thể hiện hình ảnh gốc ban đầu.
  2. grayscale: Lớp này thể hiện các hệ số nhân tuyến tính trên hiệu ứng.

Syntax:

<element class="filter grayscale | grayscale-0">..</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-20 space-y-2">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Grayscale Class</b>
    <div class="grid grid-flow-col text-center mx-44">
        <img class="rounded-lg filter grayscale" 
          src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
             alt="image">
        <img class="rounded-lg filter grayscale-0" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
             alt="image">
        
    </div>
</body>

</html>

Output:

tailwind-css-grayscale
Last Updated : 20/07/2025