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.
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.
Here's an example using a percentage value to make the image less bright:
Here's an example using a percentage value to make the image brighter:
Here's an example using a number:
The official syntax of the brightness()
function is as follows:
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.
The following table provided by Caniuse.com shows the level of browser support for this feature.