CSS Filter: Make Color Image with Transparency White

CSS filter: make color image with transparency white

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="http://i.stack.imgur.com/jO8jP.gif" /></p><p>  Filter:  <img src="http://i.stack.imgur.com/jO8jP.gif" class="filter" /></p>

How to make a color white using filter property in CSS

You can combine filter properties like this.

brightness(0) invert(1);

body {
  background-color: #dadada;
}

.custom-1 {
  filter: invert(0.5);
}

.custom-2 {
  filter:  brightness(0) invert(1);
}

<img src="https://s.cdpn.io/3/kiwi.svg" class="standard" width="50" height="50" alt="img">

<img src="https://s.cdpn.io/3/kiwi.svg" class="custom-1" width="50" height="50" alt="img">

<img src="https://s.cdpn.io/3/kiwi.svg" class="custom-2" width="50" height="50" alt="img">

Applying a color filter to an image with transparency

Use multiple filters

body {  background: lightblue;}
img {  width: 150px;}
img:nth-of-type(2) {  filter:   brightness(0.5)   sepia(1)   saturate(10000%)/* currently red */  ;  }
img:nth-of-type(3) {  filter:   brightness(0.5)   sepia(1) saturate(10000%)/* currently red */  hue-rotate(120deg)/* now it's green */;}

<img src="https://9group.co.uk/wp-content/uploads/2017/06/mobile-icon-white.png" alt="Sample Image">
<img src="https://9group.co.uk/wp-content/uploads/2017/06/mobile-icon-white.png" alt="Sample Image">
<img src="https://9group.co.uk/wp-content/uploads/2017/06/mobile-icon-white.png" alt="Sample Image">

Change color of PNG image via CSS?

You can use filters with -webkit-filter and filter:
Filters are relatively new to browsers but supported in over 90% of browsers according to the following CanIUse table: https://caniuse.com/#feat=css-filters

You can change an image to grayscale, sepia and lot more (look at the example).

So you can now change the color of a PNG file with filters.

body {
    background-color:#03030a;
    min-width: 800px;
    min-height: 400px
}
img {
    width:20%;
    float:left; 
     margin:0;
}
/*Filter styles*/
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }

<!--- img src http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg -->
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="original">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="saturate" class="saturate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="contrast" class="contrast">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="brightness" class="brightness">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="blur" class="blur">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="invert" class="invert">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="sepia" class="sepia">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="opacity" class="rss opacity">

Is there any way to colorize a white PNG image with CSS only?

This can be done with css masking, though unfortunately browser support is really bad (I believe webkit only).

http://jsfiddle.net/uw1mu81k/1/

-webkit-mask-box-image: url(http://yourimagehere);

Because your image is all white, it is a perfect candidate for masking. The way the mask works is that wherever the image is white, the original element is shown as normal, where black (or transparent) the original element is not shown. Anything in the middle has some level of transparency.

EDIT:

You can also get this to work in FireFox with slight help from svg.

http://jsfiddle.net/uw1mu81k/4/

div {  width: 50px;  height: 50px;  mask: url(#mymask);  -webkit-mask-box-image: url(http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png);}

<div style="background-color: red;"></div><div style="background-color: blue;"></div><div style="background-color: green;"></div><div style="background-color: orange;"></div><div style="background-color: purple;"></div>
<svg height="0" width="0">  <mask id="mymask">    <image id="img" xlink:href="http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png" x="0" y="0" height="50px" width="50px" />  </mask></svg>

CSS - Add Color to Black & White PNG Image Using a Filter

You can do it with CSS filters, though I wouldn’t recommend that at all:

.colorizable {    filter:        /* for demonstration purposes; originals not entirely black */        contrast(1000%)        /* black to white */        invert(100%)        /* white to off-white */        sepia(100%)        /* off-white to yellow */        saturate(10000%)        /* do whatever you want with yellow */        hue-rotate(90deg);}
.example-clip {    display: block;    height: 20px;    margin: 1em;    object-fit: none;    object-position: 0 0;    width: 300px;}
.original {    filter: contrast(1000%);}
body {    background: #333;}

<img class="colorizable example-clip" src="https://cdn.sstatic.net/Sites/stackoverflow/img/wmd-buttons.svg" /><img class="original example-clip" src="https://cdn.sstatic.net/Sites/stackoverflow/img/wmd-buttons.svg" />

Is it possible to use CSS to make white pixels in an image transparent or close to it?

Just porting my comment to an answer since the suggestion worked: you should be using mix-blend-mode: multiply. This blend mode will actually make white pixels completely transparent because of how it works—it multiplies the luminance levels of the current layer's pixels (e.g. your hello kitty overlay) with the pixels in the layers below (e.g. your background image).

Multiply blend mode multiplies the numbers for each pixel of the top layer with the corresponding pixel for the bottom layer. The result is a darker picture.

Source: Wikipedia

Since white multiplied with anything produces white (think along the lines of multiplying 0 with any number), you are guaranteed to have 100% transparency and no color changes where the overlaying pixels are white.

The next question is how you should increase the contrast of the image so that even the coloured parts of your figure will turn out white. This is as simple as pumping the brightness up to a sufficiently high level (I've used 500%, arbitrarily determined), and it seems to work:

See proof-of-concept fiddle below:

img {  position: absolute;  top: 0;  left: 0;}
.blue {  filter: grayscale(100%) brightness(600%);  mix-blend-mode: multiply;}

<img src="http://i.dailymail.co.uk/i/pix/2017/10/14/12/4551406D00000578-4979962-image-a-1_1507978862213.jpg"><img class="blue" src="http://www.altpress.com/images/uploads/news/Hello_Kitty.jpg" alt="This is a cool picture" width="300px" />

---

Related Topics