Others




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