tailwind-css
  1. tailwind-css-brightness
PreviousNext

Tailwind CSS Brightness

The Tailwind CSS Brightness class is used to adjust the brightness level of an element. It reduces or increases the brightness of an element by a specified percentage.

Syntax

brightness-{amount}
  • amount: It is a number that specifies the brightness level of an element. It accepts values between -100 (completely dark) to 100 (completely bright).

Example

Let's take an example to understand how to use the Tailwind CSS Brightness class.

<div class="bg-blue-500 p-5 text-white brightness-75">
    This is an example of Tailwind CSS Brightness.
</div>

In the above example, the brightness-75 class is used to set the brightness level of the element to 75.

Output

The above example will reduce the brightness of the element by 75%, and the output would be a darker shade of blue.

Explanation

The Tailwind CSS Brightness utility class adjusts the brightness level of an element by changing the brightness value of the CSS filter property.

By default, the brightness level of an element is 100%, which means that it is completely bright. By applying the Tailwind CSS Brightness class, we can reduce or increase the brightness level of an element.

Use

The Tailwind CSS Brightness class is useful when we want to set the brightness level of an element without changing its background color or text color.

We can use this class to add a highlight effect to a specific part of the page or create a dark mode for our website.

Important Points

  • The brightness-0 class will make the element completely black.
  • The brightness-100 class is equivalent to the default brightness level of an element.
  • The brightness-200 class will increase the brightness level to twice the default level.

Summary

The Tailwind CSS Brightness class is used to adjust the brightness level of an element. We can use this class to reduce or increase the brightness level of an element without changing its background or text color. We can specify the brightness level by using the brightness-{amount} syntax, where amount is a number between -100 to 100.

BlurContrast
Published on: