How to Decrease Image Brightness in CSS

Question

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 ?

the accepted answer works well, but there is also a new CSS standard `filter` effect which you will want to be aware of for the future. See my answer. — Spudley, Jul 18 '12 at 06:56
@shady, can you kindly revisit this question to mark one of the answers offering solutions involving filters as correct. The answer you marked correct would be the way to do it in say 2006. — Wes Modes, Mar 24 '15 at 01:53

score 203 · Accepted Answer · edited May 25 '20 at 12:25

The feature you're looking for is filter. It is capable of doing a range of image effects, including brightness:

#myimage {
    filter: brightness(50%);
}

You can find a helpful article about it here: http://www.html5rocks.com/en/tutorials/filters/understanding-css/

An another: http://davidwalsh.name/css-filters

And most importantly, the W3C specs: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

Note this is something that's only very recently coming into CSS as a feature. It is available, but a large number of browsers out there won't support it yet, and those that do support it will require a vendor prefix (ie -webkit-filter:, -moz-filter, etc).

It is also possible to do filter effects like this using SVG. SVG support for these effects is well established and widely supported (the CSS filter specs have been taken from the existing SVG specs)

Also note that this is not to be confused with the proprietary filter style available in old versions of IE (although I can predict a problem with the namespace clash when the new style drops its vendor prefix).

If none of that works for you, you could still use the existing opacity feature, but not the way you're thinking: simply create a new element with a solid dark colour, place it on top of your image, and fade it out using opacity. The effect will be of the image behind being darkened.

Finally you can check the browser support of filter here.

This is working in `video` tag too . – Salem Feb 02 '22 at 23:26 — Salem, Feb 02 '22 at 23:26

score 32 · Answer 2 · answered Jul 18 '12 at 06:33

32

OP wants to decrease brightness, not increase it. Opacity makes the image look brighter, not darker.

You can do this by overlaying a black div over the image and setting the opacity of that div.

<style>
#container {
    position: relative;
}
div.overlay {
    opacity: .9;
    background-color: black;
    position: absolute;
    left: 0; top: 0; height: 256px; width: 256px;
}
</style>

Normal:<br />
<img src="http://i.imgur.com/G8eyr.png">
<br />
Decreased brightness:<br />
<div id="container">
    <div class="overlay"></div>
    <img src="http://i.imgur.com/G8eyr.png">
</div>

DEMO

answered Jul 18 '12 at 06:33

sachleen

30,730
8
78
73

25

Opacity doesn't make anything brighter or darker. It changes the transparency of the object. Whether or not this has the effect of making something brighter or darker will depend on the background colour behind the item you're changing the opacity of. Contrary to what you say, you can make something darker by increasing the opacity if you put it on a black background. A 99% transparent image on a black background will appear almost black. I don't therefore, see why a separate overlay div is required. You can just set it on a black BG. Eg: http://jsbin.com/isemec/1/edit – NickG Nov 02 '12 at 10:56
@NickG I said that assuming white background. What you've done is the same thing as my code, only I put a semi-transparent black overlay on top of the image and you have an opaque black background with a semi-transparent image on top. – sachleen Nov 02 '12 at 16:31

JL235 · Answer 3 · 2012-07-18T06:41:11.267

In short, place black behind the image, and lower the opactiy. You can do this by wrapping the image within a div, and then lowering the opacity of the image.

For example:

<!DOCTYPE html>

<style>
    .img-wrap {
        background: black;
        display: inline-block;
        line-height: 0;
    }
        .img-wrap > img {
            opacity: 0.8;
        }
</style>

<div class="img-wrap">
    <img src="http://mikecane.files.wordpress.com/2007/03/kitten.jpg" />
</div>

Here is a JSFiddle.

score 15 · Answer 4 · answered Sep 03 '13 at 00:41

15

You could use:

filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);

answered Sep 03 '13 at 00:41

Nahomy Atias

193
1
2
6

10

This policy of "let's throw prefixes just in case" is wrong. First, if Opera ever supports it it won't have `-o-` (Opera uses Webkit/Blink now), second, Firefox jumped straight into non-prefixed `filter`, third, you have the order wrong, non-prefixed should be the last one, fourth, syntax for IE's `-ms-filter` is different (`progid:DXImageTransform`, etc), fifth, syntax for Firefox is different and requires SVG ( [See docs](https://developer.mozilla.org/en-US/docs/Web/CSS/filter#brightness()) ), sixth, new features aren't likely to be prefixed because vendors realized how bad of an idea it was – Camilo Martin Mar 19 '15 at 03:46
5

@CamiloMartin, then you should have provided a more complete answer to this question since it has not yet been answered completely. – Wes Modes Mar 24 '15 at 01:48
-webkit-filter: brightness() / -webkit-filter: contrast() works. This is an apt answer for the question. – Shilpa Aug 24 '16 at 07:42
you can use it in sass mixin like this: https://gist.github.com/johnferrie/3836468 – Erez Lieberman Sep 07 '16 at 10:52

Raj Nandan Sharma · Answer 5 · 2017-03-24T11:29:03.490

With CSS3 we can easily adjust an image. But remember this does not change the image. It only displays the adjusted image.

See the following code for more details.

To make an image gray:

img {
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
}

To give a sepia look:

    img {
     -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
}

To adjust brightness:

 img {
     -webkit-filter: brightness(50%);
     -moz-filter: brightness(50%);  
  }

To adjust contrast:

 img {
     -webkit-filter: contrast(200%);
     -moz-filter: contrast(200%);    
}

To Blur an image:

    img {
     -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
  }

Please don't post the exact same answer to multiple questions: it's either not a good fit for all or the questions are duplicates which should be flagged/closed as such. — kleopatra, Jan 19 '14 at 13:03

score 3 · Answer 6 · answered Dec 07 '14 at 18:04

3

I found this today. It really helped me. http://www.propra.nl/playground/css_filters/

All you need is to add this to your css style.:

div {-webkit-filter: brightness(57%)}

answered Dec 07 '14 at 18:04

Spirit In Motion

69
3
12

Sébastien Gicquel · Answer 7 · 2019-03-11T09:29:05.097

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>

excellent. I needed a solution to darken a background image and all the other answers darken the entire div. — nuander, Jun 08 '20 at 20:18

score 2 · Answer 8 · answered Mar 17 '21 at 21:06

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%);
}

score 1 · Answer 9 · answered Oct 18 '14 at 19:00

1

You can use css filters, below and example for web-kit. please look at this example: http://jsfiddle.net/m9sjdbx6/4/

    img { -webkit-filter: brightness(0.2);}

answered Oct 18 '14 at 19:00

GibboK

71,848
143
435
658

Prashant Ghimire · Answer 10 · 2015-03-28T03:56:32.857

0

-webkit-filter: brightness(0.50);

I've got this cool solution: https://jsfiddle.net/yLcd5z0h/

edited Mar 28 '15 at 03:56

answered Mar 28 '15 at 02:31

Prashant Ghimire

4,890
3
35
46

score 0 · Answer 11 · answered Feb 12 '18 at 18:53

0

try this if you need to convert black image into white:

.classname{
    filter: brightness(0) invert(1);
}

answered Feb 12 '18 at 18:53

Rizwan

3,741
2
25
22

score -4 · Answer 12 · answered Jul 18 '12 at 06:25

-4

Like

.classname
{
 opacity: 0.5;
}

answered Jul 18 '12 at 06:25

Satinder singh

10,100
16
60
102

thanks but that increasing the brightness not decreasing it !! – Shadi Jul 18 '12 at 06:28
It depends of the background color. – apocalypse Jul 18 '12 at 06:34
right @zgnilec its depends on the background color ... if you put it black the brightness of the image will be decreased – Shadi Jul 18 '12 at 20:04
this doesn't work for increasing brightness for more than 100%, opacity can only get up to 1 – Javis Perez Mar 24 '18 at 17:31
Being a non-english speaker, I actually wanted to search for "opacity" and got proposed this answer anyways. Even if this answer doesnt answer the question, its good to know that `opacity` increases the brightness. ;) – Apr 24 '19 at 22:43

How to Decrease Image Brightness in CSS

12 Answers12

Linked

Related