Tailwind CSS - Brightness


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

Tailwind CSS Brightness Classes

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

Class CSS Properties
brightness-0 filter: brightness(0);
brightness-50 filter: brightness(.5);
brightness-75 filter: brightness(.75);
brightness-90 filter: brightness(.9);
brightness-95 filter: brightness(.95);
brightness-100 filter: brightness(1);
brightness-105 filter: brightness(1.05);
brightness-110 filter: brightness(1.1);
brightness-125 filter: brightness(1.25);
brightness-150 filter: brightness(1.5);
brightness-200 filter: brightness(2);

Functionality of Tailwind CSS Brightness Classes

  • brightness-*: Class is used to effectively adjust the brightness of an element. {*} here specifies the different brightness values that can be set as per the need.

Tailwind CSS Brightness Classes Example

The following example will illustrate the different visibilities and utilities of Tailwind CSS Brightness 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 Brightness Classes
    </h2>
    <div class="flex gap-3 flex-wrap">
        <div>
            <h3 class="text-lg">Brightness-0</h3>
            <img class="brightness-0 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Brightness-50</h3>
            <img class="brightness-50 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Brightness-75</h3>
            <img class="brightness-75 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Brightness-100</h3>
            <img class="brightness-100 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">brightness-125</h3>
            <img class="brightness-125 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">brightness-200</h3>
            <img class="brightness-200 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
    </div>
</body>

</html>