Tailwind CSS - Brightness

Tailwind CSS: Brightness Filter

The Brightness utilities in Tailwind CSS allow you to apply a brightness() CSS filter to an element, making it appear more or less illuminated. This is a powerful tool for creating visual effects, especially for interactive states like hover or focus.

Brightness Utility Classes

Tailwind provides a range of brightness-{amount} classes. A value of 100 represents the original brightness, values below 100 make the element darker, and values above 100 make it brighter.

Class	CSS Filter
brightness-0	filter: brightness(0); (Completely black)
brightness-50	filter: brightness(.5); (50% brightness)
brightness-75	filter: brightness(.75); (75% brightness)
brightness-90	filter: brightness(.9); (90% brightness)
brightness-100	filter: brightness(1); (Normal brightness)
brightness-110	filter: brightness(1.1); (110% brightness)
brightness-125	filter: brightness(1.25); (125% brightness)
brightness-150	filter: brightness(1.5); (150% brightness)
brightness-200	filter: brightness(2); (200% brightness)

Interactive Brightness on Hover

A common and effective use of the brightness filter is to create interactive feedback. In this example, we have a gallery of images. By default, they are slightly desaturated and dimmed. When you hover over an image, it transitions to full color and brightness, drawing the user’s attention.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Brightness Filter</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">
    <h2 class="text-3xl font-bold text-center mb-8">Hover to Brighten</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">

        <!-- Card 1 -->
        <div class="group overflow-hidden rounded-lg shadow-lg">
            <img src="https://picsum.photos/600/400?random=1" alt="Random landscape"
                 class="w-full h-full object-cover transition-all duration-300
                        brightness-90 saturate-50 group-hover:brightness-100 group-hover:saturate-100" />
        </div>

        <!-- Card 2 -->
        <div class="group overflow-hidden rounded-lg shadow-lg">
            <img src="https://picsum.photos/600/400?random=2" alt="Random architecture"
                 class="w-full h-full object-cover transition-all duration-300
                        brightness-90 saturate-50 group-hover:brightness-100 group-hover:saturate-100" />
        </div>

        <!-- Card 3 -->
        <div class="group overflow-hidden rounded-lg shadow-lg">
            <img src="https://picsum.photos/600/400?random=3" alt="Random nature"
                 class="w-full h-full object-cover transition-all duration-300
                        brightness-90 saturate-50 group-hover:brightness-100 group-hover:saturate-100" />
        </div>

        <!-- Card 4 -->
        <div class="group overflow-hidden rounded-lg shadow-lg">
            <img src="https://picsum.photos/600/400?random=4" alt="Random technology"
                 class="w-full h-full object-cover transition-all duration-300
                        brightness-90 saturate-50 group-hover:brightness-100 group-hover:saturate-100" />
        </div>

    </div>
    <p class="text-center mt-6 text-gray-600">These images use `brightness-90` and `saturate-50` by default, and transition to `brightness-100` and `saturate-100` on hover.</p>
</body>
</html>

Best Practices

• Combine with Transitions: Always add transition utilities (e.g., transition-all duration-300) to make changes in brightness smooth rather than abrupt.
• Combine with Other Filters: Brightness works wonderfully with other filters like saturate, contrast, and grayscale to create more sophisticated visual effects.
• Use group-hover: For complex cards where the image is nested inside a container, use the group and group-hover utilities to apply the filter change when the parent container is hovered.
• Accessibility Note: Be cautious with extreme brightness values, as they can reduce contrast and make text or UI elements difficult to read. brightness-0 will make everything inside the element black.