brightness() CSS Function

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The brightness() CSS function adjusts the brightness of an element, making it appear lighter or darker. It is part of the family of filter functions, which allow you to apply visual effects such as blurring, contrast adjustments, and color transformations to elements. Using brightness(), you can enhance or reduce the luminosity of an element without changing its underlying content.

The function accepts a numerical value or a percentage. A value of 1 or 100% leaves the element unchanged, values greater than 1 or 100% make it brighter, and values between 0 and 1 or 0%–100% darken the element. Negative values are invalid and will be ignored.

This function can be particularly useful when combined with transition effects to create interactive hover states. For example, you could brighten an image when a user hovers over it to draw attention, or darken a div to simulate a dimmed overlay effect.

Example usage:

img {
  filter: brightness(120%);
}

div:hover {
  filter: brightness(80%);
}

In this example, the image is slightly brighter by default, while the div becomes darker when hovered, creating a subtle interactive visual cue.

The brightness() function is often used alongside other filter functions such as contrast(), blur(), and grayscale() to build complex visual effects efficiently.

Syntax

brightness() = brightness( <number-percentage>? )

Values

number-percentageA value of 100% or 1 leaves the image unchanged. Any values less than 100% (or less than 1) reduce the brightness of the image. Thus, 0 gives a completely black picture. Values greater than 100% (or greater than 1) increase the brightness of the image.

Example

HTML

<body>



  <h2>CSS brightness() Comparison</h2>



  <div class="container">

    <div class="box">

      <p>Original (100%)</p>

      <img src="https://picsum.photos/200" alt="Sample Image" class="normal">

    </div>



    <div class="box">

      <p>Brightened (150%)</p>

      <img src="https://picsum.photos/200" alt="Sample Image" class="bright">

    </div>



    <div class="box">

      <p>Darkened (50%)</p>

      <img src="https://picsum.photos/200" alt="Sample Image" class="dark">

    </div>

  </div>



</body>

CSS

.container {

  display: flex;

  gap: 20px;

  font-family: sans-serif;

}



.box {

  text-align: center;

}



/* No change applied */

.normal {

  filter: brightness(100%);

}



/* Increase brightness by 50% */

.bright {

  filter: brightness(1.5); /* You can use decimals (1.5) or percentages (150%) */

}



/* Decrease brightness by 50% */

.dark {

  filter: brightness(50%);

}



img {

  border-radius: 8px;

  width: 200px;

  height: 200px;

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS brightness() function. Hover over a browser icon to see the version that first introduced support for this CSS function.