How to Darken an Image using CSS?

Last Updated : 12 Nov, 2024

To darken an image using CSS, the filter property with the brightness function and background-image property is used. By setting the brightness value below 1, you can reduce the lightness of the image, making it appear darker.

1. Using the filter Property

The CSS filter property allows you to apply various graphical effects to elements, including brightness adjustments. By using the brightness() function, you can either lighten or darken an image. A value below 100% makes the image darker by reducing the brightness.

Syntax

filter: brightness(50%)

html

<!DOCTYPE html>
<html>

<head>
    <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>
    <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

How to Darken an Image using CSS?

2. Using background-image Property with a Linear-Gradient

Another approach to darkening an image is by using the background-image property. This method involves layering a semi-transparent black linear-gradient over the image to create a darkening effect. This is especially useful when adding text on top of images, as the gradient provides better contrast for readability.

Syntax

background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("url_of_image"))

html

<!DOCTYPE html>
<html>

<head>
    <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>
    <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:

How to Darken an Image using CSS?

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.

How to Create Image Hovered Detail using HTML & CSS?

sayantanm19

Improve

Article Tags :

How to Darken an Image using CSS?

1. Using the filter Property

2. Using background-image Property with a Linear-Gradient

Similar Reads

Thank You!

What kind of Experience do you want to share?