Setting the Image Brightness using CSS3

CSSWeb DevelopmentFront End Technology

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.


Let us now see an example −

 Live Demo

<!DOCTYPE html>
img.demo {
   filter: brightness(120%);
<h1>Learn MySQL</h1>
<img src="" alt="MySQL" width="160" height="150">
<h1>Learn MySQL</h1>
<p>Below image is brighter than the original image above.</p>
<img class="demo" src="" alt="MySQL" width="160" height="150">


Updated on 30-Dec-2019 09:55:28