How to Decrease Image Brightness in CSS

user_1150551 0
Viewed 228677

I want to decrease image brightness in CSS. I searched a lot but all I've got is about how to change the opacity, but that makes the image more bright. can anyone help me ?

css
12 Answers

If you have a background-image, you can do this : Set a rgba() gradient on the background-image.

.img_container {
  float: left;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  border : 1px solid #fff;
}

.image_original {
  background: url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}

.image_brighness {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), /* the gradient on top, adjust color and opacity to your taste */
  url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}

.img_container p {
  color: #fff;
  font-size: 28px;
}
<div class="img_container image_original">
  <p>normal</p>
</div>
<div class="img_container image_brighness ">
  <p>less brightness</p>
</div>

user_14242900

It's obvious that all you need to do is this

<img src="https://rb.gy/njdqof" class="IMG">

CSS follows

/*if you go lower than 100% the lighting goes dark and above 100% your lighting is brighter*/

.IMG {
  filter: brightness(20%);
}
Admin1
Related