Tailwind CSS Grayscale - GeeksforGeeks

Tailwind CSS Grayscale

Last Updated : 3 Nov, 2026

The Grayscale utilities in Tailwind CSS are used to apply a grayscale filter to an element, such as an image. They use the CSS grayscale() function to control how much color is removed from the image.

Grayscale Classes

  • grayscale-0: Displays the image with its original colors.
  • grayscale: Converts the image completely to grayscale.
  • grayscale-<number>: Controls the grayscale effect using a percentage, such as grayscale-25, grayscale-50, and grayscale-75.
  • grayscale-[<value>]: Applies a custom grayscale value.
  • grayscale-(<custom-property>): Uses a CSS custom property to set the grayscale value.

Syntax

<element class="grayscale">...</element>

Example:

HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <title>Tailwind CSS Grayscale Class</title>
</head>
<!--Driver Code Ends-->

<body class="min-h-screen bg-gray-100 p-8 text-center">
    <h1 class="mb-4 text-3xl font-bold text-green-600">
        Tailwind CSS Grayscale Class
    </h1>

    <div class="flex flex-wrap justify-center gap-8">
        <div>
            <p class="mb-2 font-semibold">Grayscale</p>
            <img
                class="h-48 w-64 rounded-lg object-cover grayscale"
                src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=600"
                alt="Landscape displayed in grayscale">
        </div>

        <div>
            <p class="mb-2 font-semibold">Original Colors</p>
            <img
                class="h-48 w-64 rounded-lg object-cover grayscale-0"
                src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=600"
                alt="Landscape displayed in its original colors">
        </div>

        <div>
            <p class="mb-2 font-semibold">Partial Grayscale</p>
            <img
                class="h-48 w-64 rounded-lg object-cover grayscale-50"
                src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=600"
                alt="Landscape displayed with a partial grayscale effect">
        </div>
    </div>
</body>

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->

Output: The example displays the same landscape in three ways: completely grayscale, original colors, and 50% grayscale.

Comment

Explore