CODEWITHSUNDEEP
htmlcss
frosty
frosty

Reputation: 2649

Filter brightness not working, CSS

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'>

Upvotes: 1

Views: 6738

Answers (2)

Wes Foster
Wes Foster

Reputation: 8900

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

Upvotes: 0

Strikeskids
Strikeskids

Reputation: 4052

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.

Upvotes: 1

Related Questions