How to Darken an Image using CSS
We have to darken an image using the background-image property with a linear gradient. The background-image property allows to add multiple backgrounds which are layered on top of each other.
Syntax
background-image:linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.65)),url(bg.jpg);
The following examples shows, how to darken an image using background-image
property in CSS.
Example
<html> <head> <title>How to Darken an Image using CSS</title> <style> #box1{ background-image:url(bg.jpg); background-size:cover; height:200px; width:200px; } #box2{ background-image:linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.65)),url(bg.jpg); background-size:cover; height:200px; width:200px; } </style> </head> <body> <h3>Normal Image</h3> <div id='box1'></div> <h3>Darkened Image</h3> <div id='box2'></div> </body> </html>Try it Yourself
Demo