Tailwind CSS - Saturate


Tailwind CSS Saturate is a utility class used to apply a Saturate filter to an element.

Tailwind CSS Saturate Classes

The following is the list of Tailwind CSS Saturate Classes that are used to effectively apply Saturate filters.

Class CSS Properties
saturate-0 filter: saturate(0);
saturate-50 filter: saturate(.5);
saturate-100 filter: saturate(1);
saturate-150 filter: saturate(1.5);
saturate-200 filter: saturate(2);

Functionality of Tailwind CSS Saturate Classes

  • saturate-*: This class is used to apply a saturate filter to an element. {*} here represents the value of saturation that can be set as per the need.

Tailwind CSS Saturate Classes Example

The following example will illustrate the different visibilities and utilities of Tailwind CSS Saturate classes.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl mb-3 font-bold">
        Tailwind CSS Saturate Classes
    </h2>
    <div class="flex gap-3 flex-wrap">
        <div>
            <h3 class="text-lg">saturate-0</h3>
            <img class="saturate-0 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">saturate-50</h3>
            <img class="saturate-50 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">saturate-100</h3>
            <img class="saturate-100 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">saturate-150</h3>
            <img class="saturate-150 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">saturate-200</h3>
            <img class="saturate-200 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
    </div>
</body>

</html>