Filter brightness not working, CSS

Question

I'm trying to decrease the brightness of an image, and basically make it darker, and I'm trying to do it with filter: brightness, but for some reason the image is not getting darker at all. I started at 1%, and went all the way to 100%, but the image did not get darker at all. I don't know what I did wrong. Please take a look at my code:

img {
    filter: brightness(50%);
    width: 200px;
    height: 200px;
}

<img src = 'https://static.pexels.com/photos/3164/sea-black-and-white-water-ocean.jpg'>

score 1 · Accepted Answer · answered Jul 10 '15 at 02:32

1

Presumably, your browser does not support the spec out of the box. You should add a vendor prefix to get it to work in this case.

-webkit-filter: brightness(50%);

is probably what you are looking for.

answered Jul 10 '15 at 02:32

Strikeskids

3,932
13
27

Perfect. I'm using Google Chrome by the way. – frosty Jul 10 '15 at 02:36
Wow. Someone actually down-voted my question. I don't see what is wrong with it. It's a legit question. – frosty Jul 10 '15 at 02:36
I'm not responsible for the downvote, but obviously someone thought that not knowing about vendor prefixes was a mortal sin – Michael Mullany Jul 10 '15 at 02:38

Wes Foster · Answer 2 · 2020-10-08T17:00:31.793

0

UPDATE 10/8/2020

It seems that CSS can easily understand both percentages and decimals as a percent in the brightness filter. Maybe this wasn't the case 5 years ago when I posted this answer originally, but it's certainly the case now.

Source/Documentation here: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Below is the original answer from 2015:

Don't use percentages in the filter. It should be a scale from 0 to 1.

img {
    filter: brightness(0.5);
    width: 200px;
    height: 200px;
}

0.5 would be equal to 50%

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

filter: brightness(0.4);     // Does not use percentage
filter: contrast(200%);      // Uses percentage

edited Oct 08 '20 at 17:00

answered Jul 10 '15 at 02:32

Wes Foster

8,770
5
42
62

Isn't that the same thing as opacity then? – frosty Jul 10 '15 at 02:33
I'm trying to make it darker than what the image originally was like. – frosty Jul 10 '15 at 02:33
Someone with 34 upvotes on this question provided the answer filter: brightness(50%) with percentage instead of decimals. Source here: http://stackoverflow.com/questions/11535392/how-to-decrease-image-brightness-in-css – frosty Jul 10 '15 at 02:38
According to the given link: `A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged.`. So this answer is plain wrong, at least if we take the given link as a source. – Aritz Oct 06 '20 at 07:51
1

@XtremeBiker -- Good call. It seems that CSS can easily understand both percentages and decimals as a percent in the `brightness` filter. Maybe this wasn't the case 5 years ago when I posted this answer originally, but it's certainly the case now. Thanks for pointing that out! – Wes Foster Oct 08 '20 at 16:58

Filter brightness not working, CSS

2 Answers2

Linked