brightness() CSS Function

Description

The CSS brightness() function is a filter function that adjusts the brightness of an element or an input image. It takes a single argument, which can be a number or a percentage value. A value of 0% creates a completely black image or element, while a value of 100% leaves the input unchanged. Values less than 100% darken the input, while values greater than 100% brighten it.

The brightness() function is often used to create hover effects, or to adjust the brightness of an image to match the overall brightness of a page. For example, you could use the brightness() function to brighten an image on a dark page, or to darken an image on a light page.

Here is an example of how to use the brightness() function:

.image {
  filter: brightness(150%);
}

This code will brighten the image with the class image by 50%.

You can also use the brightness() function in conjunction with other CSS filter functions to create more complex effects. For example, you could use the brightness() function with the contrast() function to create a high-contrast image.

Here is an example of how to use the brightness() function with the contrast() function:

.image {
  filter: brightness(150%) contrast(200%);
}

This code will brighten the image with the class image by 50% and increase the contrast by 200%.

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

The following table will show you the current browser support for the CSS brightness() function.

Desktop
12	53	35	40	9.1

Tablets / Mobile
53	35	41	9.3	6	4.4

Last updated by CSSPortal on: 7th October 2023