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:

View Output

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

View Output

Using Numbers

Here's an example using a number:

View Output

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

Browser Support

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