Tailwind CSS Backdrop Brightness

The backdrop-brightness utility in Tailwind CSS allows you to adjust the brightness of the backdrop-filter applied to an element. This can be useful for creating overlay effects on top of background images or for highlighting important content.

Syntax

<div class="backdrop-brightness-{amount}"></div>

• {amount} refers to a number from 0 to 100 indicating the brightness of the backdrop filter. A value of 0 creates a completely dark background, while a value of 100 creates a completely bright background.

Example

<div class="relative bg-gray-800 p-10">
  <div class="absolute inset-0 backdrop-filter backdrop-blur-lg backdrop-brightness-50"></div>
  <div class="z-10 relative">
    <h1 class="text-white text-4xl font-bold">Backdrop Brightness Example</h1>
    <p class="text-white mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam blandit lacinia sem, vitae bibendum nisi congue eu. Suspendisse varius est dui, quis congue mi accumsan eu. Sed non quam nulla. Cras ut ligula vel nulla efficitur malesuada. Suspendisse rutrum purus vel pulvinar malesuada. In quis purus ut dolor ornare dictum vel sit amet arcu.</p>
  </div>
</div>

Output

Explanation

In the above example, we have a parent div with a gray background color. We then use the absolute and inset-0 utilities to make a child div stretch to fill the entire parent element. We apply the backdrop-filter utility to this child div to create a blur effect on the background. Finally, we apply the backdrop-brightness-50 utility to adjust the brightness of the backdrop filter by 50%.

Use

The backdrop-brightness utility can be used to adjust the brightness of the backdrop filter applied to an element. This can be used to create overlay effects on top of background images or to highlight important content.

Important Points

• The backdrop-brightness utility only works in conjunction with the backdrop-filter utility.
• The brightness value can range from 0 to 100.
• A value of 0 creates a completely dark background, while a value of 100 creates a completely bright background.

Summary

• Use the backdrop-brightness utility to adjust the brightness of the backdrop filter applied to an element.
• The brightness value can range from 0 to 100 with 0 creating a completely dark background and 100 creating a completely bright background.
• It can be used to create overlay effects on top of background images or to highlight important content.