How to darken an image with CSS using a filter

Introduction

Sometimes we need to darken an image. One of the particular cases is for light and dark modes. An image is expected to be dark on dark mode.

We can do this using the CSS filter property and the brightness(%) function.

Syntax

Parameters

• filter: This is a CSS property that will allow us to add the darkness filter.
• brightness: This is the brightness function that accepts a percentage value. The default is %100 percent. A lower percentage leads to a darker image. And higher percentage value leads to a brighter image.
• value: This is the percentage specified for the brightness function.

Example

Explanation

HTML Code:

• Lines 6 and 8: We create two image tags. One is with the .dark class and the other has no class.
• With the src the attribute we link to the image we want to use.

CSS Code:

• Line 1–5: We style the images on our HTML page. We specify the width to be 50% of the body tag and should have automatic margins that will make the images centered.
• Line 7: We style the image with the .dark class by specifying the filter property to be a brightness() function. The value we specify is 50%.