CODEWITHSUNDEEP
htmlcssimage
CSJ
CSJ

Reputation: 3941

How do I tint a white image that has a transparent background, using CSS?

I have an image that has:

Here is an example of the image overlaid on a reddish background:

bunny

I would like to be able to tint the bunny any colour I like, without resorting to background tricks because the background colour that the tinted image is shown against, should show through unchanged.

A pure CSS solution is preferred, but javascript image manipulation ideas are also welcome.

The bunny by itself:

bunny by itself

Upvotes: 3

Views: 114

Answers (1)

Temani Afif
Temani Afif

Reputation: 272772

Using mask and blend mode you can do it:

.bunny {
  --img: url(https://i.ibb.co/ngFGkgy/clOwR.png); /* Your png */

  width: 32px;
  aspect-ratio: 1;
  background: var(--img) center/cover;
  background-blend-mode: darken;
  -webkit-mask: var(--img) center/cover;
          mask: var(--img) center/cover;
          
  background-color: red; /* the color */
}
<div class="bunny"></div>
<div class="bunny" style="width:100px;background-color:green"></div>
<div class="bunny" style="width:100px;background-color:blue"></div>

Upvotes: 2

Related Questions