To set image brightness in CSS, use filter brightness (%). Remember, the value 0 makes the image black, 100% is for original image and default. Rest, you can set any value of your choice, but values above 100% would make the image brighter. The filter property is used to set visual effects, such as drop shadow, contrast, brightness, saturation, shadow to images in CSS. The following is the syntax ?

Syntax

filter: none |  drop-shadow() | blur() | brightness() | contrast() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

As you can see above, with the filter property, we can set the following effects: contrast, drop shadow, blur, brightness, grayscale, hue-rotate, invert, opacity, saturate, sepia, url.

To adjust the brighthness of an image in CSS3, use the contrast value for filter property. The contrast is set with a percentage value i.e.

• Black Image: 0%

• Black Image: Values set below 0%

• Actual Image: 100% i.e., default

• Brighter: Set over 100%

Image Brightness

Let us now see an example to brighten an image with the filter property with the value brightness() ?

img.demo {
   filter: brightness(120%);
}

Example

Let us see the example ?

   


   
Learn MySQL
   
   
Learn MySQL
   
Below image is brighter than the original image above.
   

Image brightness set to 0%

Let us see an example when the image brightness is set to 0%. It will display a black image ?

img.demo {
   filter: brightness(0%);
}

Example

Here is the example ?

   


   
Learn MongoDB
   
   
Learn MongoDB
   

Image brightness set to 100%

Let us see an example when the image brightness is set to 100% ?

img.demo {
   filter: brightness(100%);
}

Example

Here is the example ?

   


   
Learn Python
   
   
Learn Python