Skip to content
Related Articles
Open in App
Not now

Related Articles

CSS | brightness() Function

Improve Article
Save Article
Like Article
  • Last Updated : 19 Aug, 2022
Improve Article
Save Article
Like Article

The brightness() function is an inbuilt function which is used to apply a filter to set the brightness of the image. This function uses the linear multiplier to the image to increase or decrease brightness. 


brightness( amount )

Parameters: This function accepts single parameter amount which holds the amount of brightness. The value of brightness is set in terms of number and percentage. The value 0% represents completely black image and 100% represents the original image. 

Below example illustrates the brightness() function in CSS: 



<!DOCTYPE html>
    <title>CSS brightness() Function</title>
        h1 {
        body {
        .brightness_effect {
            filter: brightness(10%);
    <h2>CSS brightness() function</h2>
    <img class="brightness_effect" src=
        alt="GeeksforGeeks logo">



Supported Browsers: The browsers supported by brightness() function are listed below:

  • Google Chrome 18 and above
  • Edge 12 and above
  • Internet Explorer not supported
  • Firefox 35 and above
  • Safari 6 and above
  • Opera 15 and above
My Personal Notes arrow_drop_up
Like Article
Save Article
Related Articles

Start Your Coding Journey Now!