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.
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.
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.
- Node Jimp | Color darken
- Convert an image into grayscale image using HTML/CSS
- How to hide “Image not found” icon when source image is not found?
- ES6 | Image Map
- CSS | Image Sprites
- CSS | Image Gallery
- How to Mount an ISO Image?
- Saving an Image from URL in PHP
- Bulma | Image
- Openpyxl - Adding Image
- Set the size of background image using CSS ?
- How to change color of PNG image using CSS?
- CSS | image-rendering Property
- jQuery | :image Selector
- How to crop an image using canvas ?
- How to get the width and height of an image ?
- CSS | border-image Property
- CSS | background-image Property
- HTML | DOM Image Object
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.