Tailwind CSS - Backdrop Brightness

Tailwind CSS - Backdrop Brightness

Tailwind’s backdrop brightness utilities apply a brightness filter to the area behind an element. This is part of the backdrop-filter family of CSS properties and is perfect for creating layered, ‘frosted glass’ effects in your UI.

Backdrop Brightness Classes

These utilities allow you to precisely control the brightness of the background. A value of 100 (backdrop-brightness-100) represents the original brightness, values below 100 darken the background, and values above 100 brighten it.

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

Practical Application: Frosted Glass UI Card

A great way to use backdrop filters is to create UI elements that sit on top of a dynamic or colorful background. In this example, we place a card over a vibrant background image. The card uses backdrop-blur and backdrop-brightness to create a modern, semi-transparent ‘frosted glass’ look that ensures the text on top is readable while still showing the background.

Note: For backdrop filters to work, the element’s background must have some level of transparency (e.g., bg-white/30).

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Backdrop Brightness Example</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>

    <div class="relative min-h-screen flex items-center justify-center p-4 bg-cover bg-center"
         style="background-image: url('https://images.unsplash.com/photo-1558591710-4b4a1ae0f04d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80')">

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-8 w-full max-w-4xl">

            <!-- Card with lower brightness -->
            <div class="relative p-8 rounded-xl bg-white/30 backdrop-blur-md backdrop-brightness-75">
                <h2 class="text-2xl font-bold text-gray-900">Darkened Backdrop (75)</h2>
                <p class="mt-2 text-gray-800">
                    This card uses `backdrop-brightness-75`, making the background behind it appear darker and increasing text contrast.
                </p>
            </div>

            <!-- Card with higher brightness -->
            <div class="relative p-8 rounded-xl bg-white/30 backdrop-blur-md backdrop-brightness-125">
                <h2 class="text-2xl font-bold text-gray-900">Brightened Backdrop (125)</h2>
                <p class="mt-2 text-gray-800">
                    This card uses `backdrop-brightness-125`, which brightens the background image seen through the element.
                </p>
            </div>

        </div>
    </div>

</body>
</html>

Important Considerations

• Combining Filters: Backdrop brightness is often combined with other backdrop filters like backdrop-blur, backdrop-saturate, or backdrop-contrast to create more sophisticated effects. You can chain them together in the same class attribute.
• Browser Compatibility: The backdrop-filter property is supported by all modern browsers, but is not available in Internet Explorer. Always check caniuse.com if you need to support older browsers.
• Performance: Complex backdrop filters can be computationally expensive and may affect scrolling performance or battery life on low-end devices. Use them thoughtfully and test performance on various devices.