Tailwind CSS Brightness

The brightness utilities in Tailwind CSS are used to increase or decrease the brightness of an element, such as an image. These utilities apply the CSS brightness() filter function to control how light or dark an image appears.

brightness-0: Sets the brightness to 0, making the element completely black.
brightness-50: Sets the brightness to 50%.
brightness-75: Sets the brightness to 75%.
brightness-90: Sets the brightness to 90%.
brightness-95: Sets the brightness to 95%.
brightness-100: Sets the brightness to 100%, the normal brightness level.
brightness-105: Sets the brightness to 105%.
brightness-110: Sets the brightness to 110%.
brightness-125: Sets the brightness to 125%.
brightness-150: Sets the brightness to 150%.
brightness-200: Sets the brightness to 200%.

Tailwind CSS also supports custom brightness values using brightness-[<value>] and CSS custom properties using brightness-(<custom-property>).

Syntax

<element class="brightness-{amount}">...</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 Brightness</title>
</head>
<!--Driver Code Ends-->

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

    <p class="mb-6 text-gray-700">
        Compare different brightness levels applied to the same image.
    </p>

    <div class="mx-auto grid max-w-4xl grid-cols-2 gap-6 sm:grid-cols-3">
        <div>
            <img
                class="w-full rounded-lg brightness-0"
                src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=400"
                alt="Landscape with zero brightness"
            >
            <p class="mt-2 font-medium">brightness-0</p>
        </div>

        <div>
            <img
                class="w-full rounded-lg brightness-50"
                src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=400"
                alt="Landscape with 50 percent brightness"
            >
            <p class="mt-2 font-medium">brightness-50</p>
        </div>

        <div>
            <img
                class="w-full rounded-lg brightness-75"
                src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=400"
                alt="Landscape with 75 percent brightness"
            >
            <p class="mt-2 font-medium">brightness-75</p>
        </div>

        <div>
            <img
                class="w-full rounded-lg brightness-100"
                src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=400"
                alt="Landscape with normal brightness"
            >
            <p class="mt-2 font-medium">brightness-100</p>
        </div>

        <div>
            <img
                class="w-full rounded-lg brightness-125"
                src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=400"
                alt="Landscape with 125 percent brightness"
            >
            <p class="mt-2 font-medium">brightness-125</p>
        </div>

        <div>
            <img
                class="w-full rounded-lg brightness-200"
                src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=400"
                alt="Landscape with double brightness"
            >
            <p class="mt-2 font-medium">brightness-200</p>
        </div>
    </div>
</body>

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

Output: The example displays the same landscape image with six different brightness levels, from completely black to twice the normal brightness.

Syntax

Explore