CSS brightness() Function

Use the brightness() function to adjust the brightness of an image.

The CSS brightness() function is used with the filter property to adjust the brightness of an image. The function applies a linear multiplier to input image, making it appear more or less bright.

The brightness() function requires an argument to be passed to it. This argument determines the brightness level that's applied to the image. The argument can be either a percentage value or a number.

Using Percentages

Here's an example using a percentage value to make the image less bright:

<style>
  .filtered {
    filter: brightness(50%);
  }
</style>

<img src="/pix/samples/1s.jpg" alt="Sample image">
<img class="filtered" src="/pix/samples/1s.jpg" alt="Sample image">

Here's an example using a percentage value to make the image brighter:

<style>
  .filtered {
    filter: brightness(130%);
  }
</style>

<img src="/pix/samples/1s.jpg" alt="Sample image">
<img class="filtered" src="/pix/samples/1s.jpg" alt="Sample image">

Using Numbers

Here's an example using a number:

<style>
  .filtered {
    filter: brightness(1.8);
  }
</style>

<img src="/pix/samples/13m.jpg" alt="Sample image">
<img class="filtered" src="/pix/samples/13m.jpg" alt="Sample image">

Official Syntax

The official syntax of the brightness() function is as follows:

Possible Values

The brightness() function accepts a number or percentage as its argument. This argument determines the brightness level of the image.

A value of 0% results in an image that's completely black. A value of 100% results in an image that's unchanged. Any amount over 100% produces a brighter image.

A number value of 0.5 has the same effect as the percentage value 50%. A value of 1 is the same as 100%.

Negative values are not allowed.

CSS Specifications

The brightness() function is defined in Filter Effects Module Level 1 (W3C Working Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.