Open In App

How to darken an Image using CSS ?

Last Updated : 25 Jan, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

Darkening an Image can make it appear more dramatic or pathetic. This technique involves altering the brightness and contrast levels of the image to make it look darker. We can achieve this by using CSS and applying filter effects to the picture. The filter effects can be customized to generate the desired amount of darkness.

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: This example shows how to darken an image using the filter property of CSS.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to Darken an Image
        using CSS
    </title>
 
    <style>
        h1 {
            color: green;
        }
 
        .darkened-image {
            filter: brightness(50%);
            background-image: url(
            height: 94px;
            width: 120px;
        }
    </style>
</head>
 
<body>
    <h1> GeeksForGeeks </h1>
    <b>
        How to Darken an Image
        with CSS?
    </b>
    <p>
        The image below is the
        normal image:
    </p>
    <img src=
    <p>
        The image below is the
        darkened image:
    </p>
    <div class="darkened-image"></div>
</body>
 
</html>


Output:

using-filter

Using the background-image property with a linear gradient:

CSS background-image property allows layering multiple backgrounds. To darken an image, combine a black `linear-gradient` as the front layer and the image as the back layer. Adjust the gradient’s opacity to control the darkening effect. Specify the front layer first in the order of `background-image`.

Syntax:

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

Example: Implemenattion using an opacity of 0.5 of the background gradient to darken the image.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to Darken an Image with CSS
    </title>
 
    <style>
        h1 {
            color: green;
        }
 
        .darkened-image {
            background-image:
                linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
                url(
            height: 94px;
            width: 120px;
        }
    </style>
</head>
 
<body>
    <h1> GeeksForGeeks </h1>
    <b>
        How to Darken an Image
        with CSS?
    </b>
    <p>
        The image below is the
        normal image:
    </p>
    <img src=
    <p>
        The image below is the
        darkened image:
    </p>
    <div class="darkened-image"></div>
</body>
 
</html>


Output:

using-multiple-bg

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.



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads