brightness() CSS Function

Description

The brightness() CSS function applies a linear multiplier to an image, making it appear more or less bright. A value of 0% will create an image that is completely black. A value of 100% leaves the image unchanged.

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

<img class="brightness" src="images/nature.jpg" alt="Brightness Example">

<img class="brightness2" src="images/nature.jpg" alt="Brightness Example">

.brightness {

   filter: brightness(175%);

 }

.brightness2 {

   filter: brightness(25%);

 }

Browser Support

Desktop
X	12	53	35	40	9.1
Tablets / Mobile
53	53	35	41	9.3	6.0

Last updated by CSSPortal on: 1st December 2019