Darkening an image with CSS (In any shape)

Question

So I have seen quite a few ways to darken images with CSS, including ones with rounded corners, but my problem is different.

Let's say I have an .png image that looks like a little dog (just go with it, I don't have any good examples), when I place it on my page, I give it dimensions of 100 x 100.

But I can't just overlay something on it, or tint the entire image, as it will cause the background of the dog to be tinted as well, which looks ugly.

Is it possible to tint an image of arbitrary shape with CSS?

(I'm assuming you understand my point, and useless code is not necessary)

Thanks!

Give relative position to image and add a div with absolute position inside — Morpheus, Apr 02 '13 at 13:37
You'll need to make a png the same size with a silhouette of the dog and overlay it. — gaynorvader, Apr 02 '13 at 13:39
@Morpheus, But how would this help? If the position is 100px x 100px, and the image is the shape of a dog, with the rest of the image transparent, how it adding a div with it's size at 100px x 100px going to help. Perhaps I miss understanding you though. I admit I don't do web-based languages very often. — Josiah, Apr 02 '13 at 13:40
@gaynorvader, Yes, I could do this, but I really would prefer not too if possible. If necessary I will though. — Josiah, Apr 02 '13 at 13:41
@Morpheus, And this will not affect the transparent part of the image? — Josiah, Apr 02 '13 at 13:41
Applying SVG filters would be a good solution for modern browser; otherwise one could implement it in Canvas. Regarding compatibility with legacy browsers, probably just using CSS sprites would be a compromise. — CBroe, Apr 02 '13 at 13:42
@CBroe, If you could post an answer with some more detail on this, that sounds like a good solution. I only care about modern browsers here, no IE either. — Josiah, Apr 02 '13 at 13:43
have you thought about using `opacity` on the image? I know this will more lighten than darken the image but that might be acceptable in this case — Sean, Apr 02 '13 at 13:44
@Josiah, It may be possible to dynamically detect the non-white or non-transparent pixels in a png using javascript and then progamatically fill in a new png with the silhouette, but it'd be more work than it's worth unless you were doing it with a lot of images. — gaynorvader, Apr 02 '13 at 13:45
@SeanDunwoody, No, I can not alter the opacity, my image is light enough by default, I need to darken it instead. Though I may resort to this. — Josiah, Apr 02 '13 at 13:46
http://stackoverflow.com/a/12810906/1427878, https://developer.mozilla.org/en-US/docs/Applying_SVG_effects_to_HTML_content — CBroe, Apr 02 '13 at 13:46
@SeanDunwoody, Actually, I take it it back. That actually might be the best approach for this exact circumstance. You should post that as an answer. — Josiah, Apr 02 '13 at 13:52

score 201 · Answer 1 · answered Dec 10 '16 at 14:55

201

Easy as

img {
  filter: brightness(50%);
}

answered Dec 10 '16 at 14:55

The Whiz of Oz

6,763
9
48
85

4

This is the way to go, if not too worried about old IE – Talha Talip Açıkgöz Aug 13 '18 at 13:14
6

Note: if this makes your image look too dull, you may want to increase the saturation simultaneously, e.g. `filter: brightness(75%) saturate(140%);` – Ben Y Jul 27 '19 at 18:54
Sadly it doesnt work well when image is png on transparent/white background – Ivan Topić Jan 20 '21 at 18:22

Sean · Accepted Answer · 2016-08-24T07:58:15.690

28

You could always change the opacity of the image, given the difficulty of any alternatives this might be the best approach.

CSS:

.tinted { opacity: 0.8; }

If you're interested in better browser compatability, I suggest reading this:

http://css-tricks.com/css-transparency-settings-for-all-broswers/

If you're determined enough you can get this working as far back as IE7 (who knew!)

Note: As JGonzalezD points out below, this only actually darkens the image if the background colour is generally darker than the image itself. Although this technique may still be useful if you don't specifically want to darken the image, but instead want to highlight it on hover/focus/other state for whatever reason.

edited Aug 24 '16 at 07:58

answered Apr 02 '13 at 13:54

Sean

6,389
9
45
69

15

Also wrap the image with a div with `background: black;` – david_adler Nov 18 '15 at 15:32
8

This wont make an image darker than it is (opacity: 1;) It's actually lightening. – juliangonzalez Aug 23 '16 at 18:12
3

If the image is displayed over a dark background, it will seem to have the effect of darkening the image (as more of the darker background will show through). You can see an example here: https://jsfiddle.net/mvhfxrm1/ the top image has a colour of #CCCCCC while the bottom image has a colour of #676767 – Sean Aug 24 '16 at 07:55
@SeanDunwoody right, unfortunately for images shaped different than a square it wont work (images with transparencies) since the dark background is going to be visible all the time. But it can work for squared images. – juliangonzalez Aug 24 '16 at 22:08
1

It depends on the complexity of the shape, if it's simply rounded corners then you can apply these as styles to the background container (using border-radius). Although if you have a complex picture like a person on a transparent background then I can't really think of a way around that. The best way to approach that might be to use a sprite or something to swap images out creating this effect, but there might be a better way to do this, I'm not as up to date on CSS as I used to be unfortunately. – Sean Aug 25 '16 at 11:05
tint means adding white. if background color is white, decreasing the opacity makes image even brighter – Akin Zeman Feb 05 '23 at 02:57

score 20 · Answer 3 · answered Jul 30 '19 at 13:18

20

if you want only the background-image to be affected, you can use a linear gradient to do that, just like this:

  background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(IMAGE_URL);

If you want it darker, make the alpha value higher, else you want it lighter, make alpha lower

answered Jul 30 '19 at 13:18

Arthur Serafim

393
2
7

2

Thank you, as this allowed me to darken my
element's image without darkening the content of the page. Best answer!
– Twistedben Apr 22 '20 at 21:17
1

I'm glad you liked. Always happy to be useful! – Arthur Serafim Apr 23 '20 at 18:24

score 2 · Answer 4 · answered May 09 '14 at 15:30

I would make a new image of the dog's silhouette (black) and the rest the same as the original image. In the html, add a wrapper div with this silhouette as as background. Now, make the original image semi-transparent. The dog will become darker and the background of the dog will stay the same. You can do :hover tricks by setting the opacity of the original image to 100% on hover. Then the dog pops out when you mouse over him!

style

.wrapper{background-image:url(silhouette.png);} 
.original{opacity:0.7:}
.original:hover{opacity:1}

<div class="wrapper">
  <div class="img">
    <img src="original.png">
  </div>
</div>

second line should be `.original{opacity:0.7;}` – Reza Shirazian Jan 18 '16 at 00:15 — Reza Shirazian, Jan 18 '16 at 00:15

score 0 · Answer 5 · answered Apr 02 '13 at 14:02

Webkit only solution

Quick solution, relies on the -webkit-mask-image property. -webkit-mask-image sets a mask image for an element.

There are a few gotchas with this method:

Obviously, only works in Webkit browsers
Requires an additional wrapper to apply the :after psuedo-element (IMG tags can't have :before/:after pseudo elements, grr)
Because there's an additional wrapper, I'm not sure how to use the attr(…) CSS function to get the IMG tag URL, so it's hard-coded into the CSS separately.

If you can look past those issues, this might be a possible solution. SVG filters will be even more flexible, and Canvas solutions will be even more flexible and have a wider range of support (SVG doesn't have Android 2.x support).

Darkening an image with CSS (In any shape)

5 Answers5

Linked