CSS Darken Image Example.

CSS Darken Image | Make Image Darken Using CSS

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS
  • 1 min read

You can use the CSS filter property or linear-gradient property to make an image darken using CSS. Below are the examples:

CSS Darken an Image Using filter

The following CSS code uses the filter property with brightness parameter to reduce the brightness to 50% for the img tag.

<style>
img {
  filter: brightness(50%);
}
</style>

Or if you have used a div element or any other element to show an image, then you can specify a class to it, for example, darken-image and then you can use CSS for this class. Below is an example:

<style>
        .darken-image {
            filter: brightness(50%);
        }
</style>

Reduce Brightness Using CSS linear-gradient Property

The following CSS code uses the linear-gradient property to make the image darken.

<style>
        .darken-image {
            background-image: 
            linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
            url(
'/images/yourimage.png');
        }
</style>