csscss-filters

CSS filter: make color image with transparency white

I have a colored png image with transparency. I would like to use css filter to make the whole image white but leave the transparency as it is. Is that possible in CSS?

Solution

  • You can use

    filter: brightness(0) invert(1);


    html {
  background: red;
}
p {
  float: left;
  max-width: 50%;
  text-align: center;
}
img {
  display: block;
  max-width: 100%;
}
.filter {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}
    <p>
  Original:
  <img src="https://i.sstatic.net/jO8jP.gif" />
</p>
<p>
  Filter:
  <img src="https://i.sstatic.net/jO8jP.gif" class="filter" />
</p>

    First, brightness(0) makes all image black, except transparent parts, which remain transparent.

    Then, invert(1) makes the black parts white.