How to darken an Image using CSS ?

30 Jul, 2021
Method 1: Using the filter property: The filter property is used to apply various graphical effects to an element. The brightness() function can be used as a value to apply a linear multiplier to make it appear darker or lighter than the original. To make an image darker, any value below 100% could be used to darken the image by that percentage.
Syntax:
filter: brightness(50%)
Example:
<!DOCTYPE html><html>  <head>    <title>        How to Darken an Image        using CSS?    </title>      <style>        .darkened-image {            filter: brightness(50%);                  background-image: url('https://media.geeksforgeeks.org/wp-content/cdn-uploads/20191121162913/s11.png');            height: 94px;            width: 120px;        }    </style></head>  <body>    <h1 style="color: green">        GeeksForGeeks    </h1>          <b>        How to Darken an Image        with CSS?    </b>          <p>        The image below is the        normal image:    </p>          <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20191121162913/s11.png">          <p>        The image below is the        darkened image:    </p>          <div class="darkened-image"></div></body>  </html>
Output:
Method 2: Using the background-image property with a linear gradient: The background-image property in CSS supports the use of multiple backgrounds that are layered on top of each other. Using the linear-gradient property, a black colored background is used as the front layer and the image to be darkened is used as the back layer. The order of the background-image property specifies the front layer to be specified first before defining the layers at the back.The opacity of the black gradient can be changed to control the amount of darkening. This can be used accordingly to darken the image as required.
Syntax:
background-image: linear-gradient(rgba(0, 0, 0, 0.5),
                       rgba(0, 0, 0, 0.5)), url("url_of_image"))
Example: Using an opacity of 0.5 of the background gradient to darken the image.
<!DOCTYPE html><html>  <head>    <title>        How to Darken an Image with CSS?    </title>          <style>        .darkened-image {            background-image:             linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),            url('https://media.geeksforgeeks.org/wp-content/cdn-uploads/20191121162913/s11.png');            height: 94px;            width: 120px;        }    </style></head>  <body>    <h1 style="color: green">        GeeksForGeeks    </h1>          <b>        How to Darken an Image        with CSS?    </b>          <p>        The image below is the        normal image:    </p>          <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20191121162913/s11.png">          <p>        The image below is the        darkened image:    </p>          <div class="darkened-image"></div></body>  </html>
Output:
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
CSS-Misc
Picked
CSS
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.