darken image Using opacity, Using filter: brightness(50%), Using the background-image property with a linear gradient. also you can use darken image background, darken text in image and many more.

.container img {
  filter: brightness(50%);
}

How to Darken an Image with CSS?

Contents

If you required to darken (or lighten) images using CSS Code Example with demo.

1. Using opacity :

This is the original pic:

Setting css :

First of all i lower the opacity of the pic

img {
opacity: 0.5;
}

By custom setting the css opacity to 0.5 , the simply images will turn white(ish)

Now all i required to do to make it darker is to change the background color to black :

ul {
background-color: black;
}

I can use this to create cool hover effect. you can check out the pen that I made

2. Using filter property:

Just use filter: brightness(50%); for the image to lower the brightness.

filter: brightness(50%);

3. Using RGBA colors:

Let’s tell you want to simply set an image as as background images. Also if you don’t darken it ,fitting you put on the image like HTML buttons, some texts or more Inputs will not look cool using CSS Battle. you required to darken it to make other stuff stand out So how do we do that?

simply, It’s easy. let me display you

Setting the default:

header {
    width: 100%;
    background-image: url(pakainfo-bK.jpg);
    background-position: center;
    background-size: cover;
}

For making it darker, we add linear-gradient(black,black). Select a color as well as lower the transparency of the color

header {
background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)) , url(pakainfo-bK.jpg);
}

how to darken image in css?
Example darken image css

.container img {
  filter: brightness(50%);
}

darken an Image using CSS ?

<!DOCTYPE html>
<html>

<head>
	<title>How to Darken an Image using CSS? - www.pakainfo.com</title>

	<style>
		.darkened-image {
			filter: brightness(50%);
			background-image: url('https://www.pakainfo.com/wp-content/admin/welcome/cover.png');
			height: 94px;
			width: 120px;
		}
	</style>
</head>

<body>
	<h2 style="color: green">
		Pakainfo.com
	</h2>
	<b>How to Darken an Image with CSS?</b>
	
	<p>The image below is the normal image:</p>
	
	<img src="https://www.pakainfo.com/wp-content/admin/welcome/cover.png">
	
	<p>The image below is the darkened image:</p>
	
	<div class="darkened-image"></div>
</body>
</html>

How To Darken An Image with CSS Tutorial

how to darken background image in html code example?

#banner-pakainfo {
  display: table;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('pakainfo.jpg');
  background-position: center top;
  height: 350px;
}

conclusion :

Also Read This 👉 [500+] Best Attitude Shayari In English For Instagram, Fb & Whatsapp

Use opacity and filter property to darken an image and make cool hover effect with it. Use RGBA colors to create your background image darker.

I hope you get an idea about how to darken background image in css?.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.