CODEWITHSUNDEEP
htmlcssimagepngoverlay
user429620
user429620

Reputation:

Change color of PNG image via CSS?

Given a transparent PNG displaying a simple shape in white, is it possible to somehow change the color of this through CSS? Some kind of overlay or what not?

Upvotes: 742

Views: 1795917

Answers (30)

Meet Bhanabhagwan
Meet Bhanabhagwan

Reputation: 46

I am using these:

filter: drop-shadow(100vw 0 0 #5e8141);
transform: translateX(-100vw);

Upvotes: -1

Jules Colle
Jules Colle

Reputation: 11939

You can use -webkit-mask-image if you modify your HTML a bit.

Instead of <img src="my-image.png">, wrap it like this:

<span class="masked" style="-webkit-mask-image: url('my-image.png');">
  <img src="my-image.png"/>
</span>

Then add this CSS if you want to give it the color #ff0000:

.masked {
  display: inline-block;
  background-color: #ff0000;
  -webkit-mask-size: 95%; /* edges might get cut off if you use 100% */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.masked > img {
  opacity: 0;
  display:block;
}

Fully working example:

(-webkit-mask-image style moved to the CSS class for brevity. This only makes sense when you're using the same image repeatedly.)

.masked {
  display: inline-block;
  background-color: red;
  -webkit-mask-size: 95%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-image: url('https://i.sstatic.net/jY43cbFd.png')
}


.masked > img {
  opacity: 0;
  width: auto;
  display:block;
}
<img src="https://i.sstatic.net/jY43cbFd.png" height="100" />
<span class="masked">
  <img src="https://i.sstatic.net/jY43cbFd.png" height="100" />
</span>
<span class="masked" style="background-color: blue;">
  <img src="https://i.sstatic.net/jY43cbFd.png" height="100" />
</span>
<span class="masked" style="background-color: orange;">
  <img src="https://i.sstatic.net/jY43cbFd.png" height="100" />
</span>

More examples: https://codepen.io/pwkip/pen/BaGMRjK

Upvotes: 3

Facundo Colombier
Facundo Colombier

Reputation: 3661

looking for solutions on colorize PNGs with CSS found these solutions, I'll leave them here in case anyone else find them useful:

/* grayscale version */
filter: grayscale(1) invert(.9);

this one is from @jules-cole and was the simplest/clearest one around:

/* colorized version */
filter: drop-shadow(0px 1000px 0 #E51D2D);
transform: translateY(-1000px);

and this one was the most useful to me since I only needed to change the black part of a png:

/* just black part to white */
filter: saturate(300%) brightness(100000%);

Upvotes: 3

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92717

Anti-answer: Black shapes

This is improvement of Vasan answer for PNG with black shapes - use svg <image> tag and define filter (svg filters are more powerfull than css filters)

<svg>
  <defs>
    <filter id="colorMask">
      <feFlood flood-color="#ff0000" result="flood" />
      <feColorMatrix result="inv" in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" />
      <feComposite in="inv" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  
  <image filter="url(#colorMask)" xlink:href="pic.png" />

</svg>


<svg width=37px height=36px>
  <defs>
    <filter id="colorMask">
      <feFlood flood-color="#ff0000" result="flood" />
      <feColorMatrix result="inv" in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" />
      <feComposite in="inv" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  
  <image filter="url(#colorMask)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAkBAMAAAD87O6VAAAACXBIWXMAAAsSAAALEgHS3X78AAAALVBMVEUAAABHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADMHXDdAAAAD3RSTlPAAIBAMNAgsOBQYKAQkHD2u9I6AAAAh0lEQVQoz2OwYEAHBQxGguiAYaDFrAMY2heiiiUUCwqKqU5EFhNpBpEyvMhiHo5gnrQiklgI1PhghJiUIlTMASEmehAqJu4IF0uHOQ2sASIGd7cYI1xME+4H/GLY9GKzA5tbsLkZ5jeZECxh8BA5rDrBtjKhhiknRpiCwz584SBJByhiWNIuAFBkOlCFUBO4AAAAAElFTkSuQmCC" />
  
</svg>

<!-- Original image with black shapes (for comparision) -->

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAkBAMAAAD87O6VAAAACXBIWXMAAAsSAAALEgHS3X78AAAALVBMVEUAAABHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADMHXDdAAAAD3RSTlPAAIBAMNAgsOBQYKAQkHD2u9I6AAAAh0lEQVQoz2OwYEAHBQxGguiAYaDFrAMY2heiiiUUCwqKqU5EFhNpBpEyvMhiHo5gnrQiklgI1PhghJiUIlTMASEmehAqJu4IF0uHOQ2sASIGd7cYI1xME+4H/GLY9GKzA5tbsLkZ5jeZECxh8BA5rDrBtjKhhiknRpiCwz584SBJByhiWNIuAFBkOlCFUBO4AAAAAElFTkSuQmCC">

Upvotes: 3

Luis Lobo
Luis Lobo

Reputation: 859

Currently this is possible using masks in CSS. The idea is to simply create a div completely filled with a solid color using 'background-color'. After that we put a mask on it with the exact size of the sister image. That's why it's necessary to use 'fit-content'.

It is also recommended that you look at browser support for 'fit-content', 'mask-image' and 'mask-size' as they do not work in older browsers.

HTML:

<div class="img-color-fill">
  <div></div>
  <img src="image.png|svg">
</div>

CSS:

.img-color-fill {
  position: relative;
  width: fit-content;
  height: fit-content;
  line-height: 0;
}
.img-color-fill div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-image: url("image.png"); /* works with svg too */
  mask-image: url("image.png"); /* works with svg too */
}
.img-color-fill img {
  width: 256px;
  height: auto;
  opacity: 0;
}

Example:

.img-color-fill {
  position: relative;
  width: fit-content;
  height: fit-content;
  line-height: 0;
}
.img-color-fill div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI1NiA1MSI+Cgk8cGF0aCBmaWxsPSIjMjIyNDI2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im02MyAzNi43YzAgMy41LTMuMiA1LjYtNy42IDUuNi0yLjcgMC4yLTUuNC0wLjctNy41LTIuNmwxLjgtMS44YzEuNSAxLjUgMy42IDIuMyA1LjcgMi4yIDMuMSAwIDUtMS4xIDUtMy4zIDAtMS43LTAuOC0yLjYtMy0yLjhsLTMuMS0wLjJjLTMuNS0wLjMtNS40LTItNS40LTUgMC0zLjMgMi43LTUuNCA2LjctNS40cTAuOSAwIDEuNyAwLjEgMC45IDAuMSAxLjcgMC4zIDAuOSAwLjMgMS43IDAuNyAwLjcgMC4zIDEuNSAwLjlsLTEuOCAxLjhjLTEuNC0xLjEtMy4yLTEuNy01LTEuNi0yLjcgMC00LjEgMS4xLTQuMSAzLjEgMCAxLjYgMC45IDIuNiAzLjIgMi43bDMgMC4zYzMuMyAwLjMgNS41IDEuNCA1LjUgNXptMjMuNy03LjJ2MTIuNWgtMi44di0xLjhjLTEuNCAxLjQtMy40IDIuMS01LjMgMi0yLjYgMC00LjEtMC40LTUuMi0xLjctMS0wLjktMS40LTIuMy0xLjQtMy43IDAtMy4zIDIuMi01LjQgNi4zLTUuNGg1LjV2LTEuOGMwLTIuNi0xLjMtNC00LjctNHEtMC42IDAtMS4zIDAtMC43IDAuMS0xLjMgMC40LTAuNiAwLjMtMS4xIDAuNy0wLjUgMC41LTAuOSAxbC0xLjgtMS44YzEuNi0yLjEgMy40LTIuNiA2LjQtMi42IDUgMCA3LjQgMi4yIDcuNiA2LjJ6bS0yLjkgNGgtNS4ycS00LjEgMC00LjEgMy4zYzAgMi4yIDEuMyAzLjIgNC4yIDMuMnEwLjYgMCAxLjEgMCAwLjYtMC4xIDEuMS0wLjIgMC41LTAuMiAxLTAuNCAwLjUtMC4zIDAuOS0wLjdjMC44LTAuOCAxLjEtMiAxLTMuMXptOS01LjdxLTEuNCAyLjMtMS4yIDUtMC4yIDIuNyAxLjIgNC45YzEgMS40IDIuNiAyLjIgNC4zIDIuMSAxLjYgMCAzLjItMC43IDQuMi0yLjFsMS44IDEuOGMtMS41IDEuOC0zLjcgMi45LTYgMi44LTQuNiAwLTguMS0zLjItOC4xLTkuNSAwLTYuNCAzLjQtOS41IDguMS05LjVxMC44LTAuMSAxLjcgMC4xIDAuOCAwLjIgMS42IDAuNSAwLjggMC40IDEuNSAwLjkgMC42IDAuNSAxLjIgMS4ybC0xLjggMS44Yy0xLTEuNC0yLjYtMi4xLTQuMi0yLjEtMS43LTAuMS0zLjMgMC43LTQuMyAyLjF6bTIwLjcgMi40bDcuNyAxMS44aC0zLjNsLTYuMi0xMC4xLTMuMyAzLjR2Ni43aC0yLjd2LTI2LjdoMi43djE2LjRsOC40LTguMmgzLjN6bTIwLjgtNi44cTAuOCAwLjEgMS41IDAuNSAwLjggMC4zIDEuNSAwLjcgMC43IDAuNSAxLjIgMS4xYzEuOCAxLjkgMi4yIDQgMi4yIDcuNCAwIDMuNS0wLjQgNS43LTIuMiA3LjUtMS41IDEuNi0zLjcgMi41LTUuOSAyLjNxLTAuOCAwLTEuNi0wLjEtMC44LTAuMi0xLjUtMC41LTAuOC0wLjMtMS41LTAuNy0wLjctMC41LTEuMy0xYy0xLjctMS44LTIuMi00LTIuMi03LjUgMC0zLjMgMC41LTUuNiAyLjItNy40IDEuNS0xLjcgMy43LTIuNCA1LjktMi40cTAuOCAwIDEuNyAwLjF6bTEuNyA5LjdjMC0xLjktMC4xLTMuNy0xLTQuNy0xLjMtMS4xLTMuMi0xLjEtNC40IDAtMSAxLTEuMSAyLjgtMS4xIDQuNyAwIDIgMC4xIDMuOCAxLjEgNC43IDEuMiAxLjEgMy4xIDEuMSA0LjQgMCAwLjktMC45IDEtMi42IDEtNC43em0yMi42LTkuNmwtNi45IDE5LjNoLTMuN2wtNy4yLTE5LjNoNS4xbDMuOCAxMS44IDMuOS0xMS44em04LTAuMmM1LjQgMCA4LjQgMy45IDguMyA5LjF2Mi4yaC0xMS45djAuNnEwIDAuOCAwLjQgMS41IDAuNCAwLjcgMC45IDEuMiAwLjYgMC41IDEuNCAwLjggMC43IDAuMyAxLjUgMC4yYzEuNiAwLjIgMy4zLTAuNSA0LjQtMS42bDIuOSAyLjdjLTEuOCAyLjEtNC42IDMuMi03LjMgMy4xLTQuNSAwLTguOS0yLjEtOC45LTEwIDAtNi4yIDMuNC05LjYgOC4zLTkuNnptMy41IDhsLTAuNC0yLjFjLTAuNi0xLjItMS44LTEuOS0zLjItMS45LTEuNCAwLTIuNiAwLjctMy4xIDEuOWwtMC40IDIuMXptMTEuMi01LjljMS4yLTEuNCAzLTIgNC44LTJxMC42IDAgMS4yIDAuMSAwLjYgMC4xIDEuMiAwLjMgMC41IDAuMyAxIDAuNiAwLjUgMC40IDAuOSAwLjhsLTMuNSAzLjZjLTAuNi0wLjctMS41LTEuMS0yLjUtMS4xaC0wLjJjLTEuOCAwLjMtMi45IDEuOC0yLjkgMy42djExLjZoLTQuOHYtMTkuM2g0LjZ2MS44em0xMC4zLTQuM3EwLTEuMSAwLjUtMi4xIDAuNC0wLjkgMS4yLTEuNyAwLjctMC43IDEuNy0xLjEgMS0wLjQgMi4xLTAuNGgyLjd2NC4yaC0yYy0xIDAuMS0xLjQgMC45LTEuNCAxLjh2MmgzLjZ2My44aC0zLjZ2MTUuMWgtNC44em0yOS40IDIuM3EwLjggMC4xIDEuNiAwLjQgMC44IDAuMyAxLjQgMC44IDAuNyAwLjUgMS4zIDEuMWMxLjggMS45IDIuMiA0IDIuMiA3LjQgMCAzLjUtMC40IDUuNy0yLjIgNy41LTEuNSAxLjYtMy43IDIuNC01LjkgMi4zcS0wLjggMC0xLjYtMC4xLTAuOC0wLjItMS42LTAuNS0wLjctMC4zLTEuNC0wLjctMC43LTAuNS0xLjMtMWMtMS44LTEuOC0yLjItNC0yLjItNy41IDAtMy4zIDAuNC01LjYgMi4yLTcuNCAxLjUtMS43IDMuNy0yLjQgNS45LTIuNHEwLjggMCAxLjYgMC4xem0xLjggOS43YzAtMS45LTAuMS0zLjctMS4xLTQuNy0xLjItMS4xLTMuMS0xLjEtNC40IDAtMC45IDEtMS4xIDIuOC0xLjEgNC43IDAgMS45IDAuMiAzLjcgMS4xIDQuNyAxLjMgMS4xIDMuMiAxLjEgNC40IDAgMS0xIDEuMS0yLjYgMS4xLTQuN3ptMjcuMy05LjVoNS4ybC01LjkgMTkuM2gtNC4xbC00LTEyLjEtNCAxMi4xaC0zLjlsLTUuOS0xOS4zaDVsMy4yIDExLjkgMy44LTEyaDMuNGw0IDExLjggMy4yLTExLjh6bS00Mi43IDEzLjljMC4yIDAuOCAwLjkgMS4yIDEuNyAxLjFoMS44djQuMWgtMy40cS0xIDAtMi0wLjUtMC45LTAuNC0xLjYtMS4yLTAuNy0wLjgtMS4xLTEuOC0wLjMtMC45LTAuMi0ydi0yMS4yaDQuOHptLTEzNy44LTExLjJoLTIuNnYxMC42YzAgMS44IDAuNyAyLjggMi41IDIuOGgxLjR2Mi4zaC0yYy0zLjEgMC00LjYtMi4yLTQuNi00Ljl2LTE5LjJoMi43djYuMWg1LjF6Ii8+Cgk8cGF0aCBmaWxsPSIjYmNiYmJiIiBkPSJtMzUuNiA0NS41di0xMi40aDUuNXYxNy45aC00MS4xdi0xNy45aDUuNXYxMi40eiIvPgoJPHBhdGggZmlsbD0iI2Y0ODAyNCIgZD0ibTMxLjUgMzUuOGwxLjEtNC4xLTIyLjEtNC41LTAuOSA0LjV6bS0xOC45LTE0LjlsMjAuNSA5LjcgMS45LTQuMi0yMC41LTkuNnptNS44LTEwLjJsMTcuMiAxNC42IDIuOS0zLjUtMTcuNC0xNC42LTIuOSAzLjV6bTExLjEtMTAuOGwtMy43IDIuOCAxMy42IDE4LjMgMy43LTIuN3ptLTE5LjkgMzcuMmgyMS45djQuMWgtMjEuOXoiLz4KPC9zdmc+");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI1NiA1MSI+Cgk8cGF0aCBmaWxsPSIjMjIyNDI2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im02MyAzNi43YzAgMy41LTMuMiA1LjYtNy42IDUuNi0yLjcgMC4yLTUuNC0wLjctNy41LTIuNmwxLjgtMS44YzEuNSAxLjUgMy42IDIuMyA1LjcgMi4yIDMuMSAwIDUtMS4xIDUtMy4zIDAtMS43LTAuOC0yLjYtMy0yLjhsLTMuMS0wLjJjLTMuNS0wLjMtNS40LTItNS40LTUgMC0zLjMgMi43LTUuNCA2LjctNS40cTAuOSAwIDEuNyAwLjEgMC45IDAuMSAxLjcgMC4zIDAuOSAwLjMgMS43IDAuNyAwLjcgMC4zIDEuNSAwLjlsLTEuOCAxLjhjLTEuNC0xLjEtMy4yLTEuNy01LTEuNi0yLjcgMC00LjEgMS4xLTQuMSAzLjEgMCAxLjYgMC45IDIuNiAzLjIgMi43bDMgMC4zYzMuMyAwLjMgNS41IDEuNCA1LjUgNXptMjMuNy03LjJ2MTIuNWgtMi44di0xLjhjLTEuNCAxLjQtMy40IDIuMS01LjMgMi0yLjYgMC00LjEtMC40LTUuMi0xLjctMS0wLjktMS40LTIuMy0xLjQtMy43IDAtMy4zIDIuMi01LjQgNi4zLTUuNGg1LjV2LTEuOGMwLTIuNi0xLjMtNC00LjctNHEtMC42IDAtMS4zIDAtMC43IDAuMS0xLjMgMC40LTAuNiAwLjMtMS4xIDAuNy0wLjUgMC41LTAuOSAxbC0xLjgtMS44YzEuNi0yLjEgMy40LTIuNiA2LjQtMi42IDUgMCA3LjQgMi4yIDcuNiA2LjJ6bS0yLjkgNGgtNS4ycS00LjEgMC00LjEgMy4zYzAgMi4yIDEuMyAzLjIgNC4yIDMuMnEwLjYgMCAxLjEgMCAwLjYtMC4xIDEuMS0wLjIgMC41LTAuMiAxLTAuNCAwLjUtMC4zIDAuOS0wLjdjMC44LTAuOCAxLjEtMiAxLTMuMXptOS01LjdxLTEuNCAyLjMtMS4yIDUtMC4yIDIuNyAxLjIgNC45YzEgMS40IDIuNiAyLjIgNC4zIDIuMSAxLjYgMCAzLjItMC43IDQuMi0yLjFsMS44IDEuOGMtMS41IDEuOC0zLjcgMi45LTYgMi44LTQuNiAwLTguMS0zLjItOC4xLTkuNSAwLTYuNCAzLjQtOS41IDguMS05LjVxMC44LTAuMSAxLjcgMC4xIDAuOCAwLjIgMS42IDAuNSAwLjggMC40IDEuNSAwLjkgMC42IDAuNSAxLjIgMS4ybC0xLjggMS44Yy0xLTEuNC0yLjYtMi4xLTQuMi0yLjEtMS43LTAuMS0zLjMgMC43LTQuMyAyLjF6bTIwLjcgMi40bDcuNyAxMS44aC0zLjNsLTYuMi0xMC4xLTMuMyAzLjR2Ni43aC0yLjd2LTI2LjdoMi43djE2LjRsOC40LTguMmgzLjN6bTIwLjgtNi44cTAuOCAwLjEgMS41IDAuNSAwLjggMC4zIDEuNSAwLjcgMC43IDAuNSAxLjIgMS4xYzEuOCAxLjkgMi4yIDQgMi4yIDcuNCAwIDMuNS0wLjQgNS43LTIuMiA3LjUtMS41IDEuNi0zLjcgMi41LTUuOSAyLjNxLTAuOCAwLTEuNi0wLjEtMC44LTAuMi0xLjUtMC41LTAuOC0wLjMtMS41LTAuNy0wLjctMC41LTEuMy0xYy0xLjctMS44LTIuMi00LTIuMi03LjUgMC0zLjMgMC41LTUuNiAyLjItNy40IDEuNS0xLjcgMy43LTIuNCA1LjktMi40cTAuOCAwIDEuNyAwLjF6bTEuNyA5LjdjMC0xLjktMC4xLTMuNy0xLTQuNy0xLjMtMS4xLTMuMi0xLjEtNC40IDAtMSAxLTEuMSAyLjgtMS4xIDQuNyAwIDIgMC4xIDMuOCAxLjEgNC43IDEuMiAxLjEgMy4xIDEuMSA0LjQgMCAwLjktMC45IDEtMi42IDEtNC43em0yMi42LTkuNmwtNi45IDE5LjNoLTMuN2wtNy4yLTE5LjNoNS4xbDMuOCAxMS44IDMuOS0xMS44em04LTAuMmM1LjQgMCA4LjQgMy45IDguMyA5LjF2Mi4yaC0xMS45djAuNnEwIDAuOCAwLjQgMS41IDAuNCAwLjcgMC45IDEuMiAwLjYgMC41IDEuNCAwLjggMC43IDAuMyAxLjUgMC4yYzEuNiAwLjIgMy4zLTAuNSA0LjQtMS42bDIuOSAyLjdjLTEuOCAyLjEtNC42IDMuMi03LjMgMy4xLTQuNSAwLTguOS0yLjEtOC45LTEwIDAtNi4yIDMuNC05LjYgOC4zLTkuNnptMy41IDhsLTAuNC0yLjFjLTAuNi0xLjItMS44LTEuOS0zLjItMS45LTEuNCAwLTIuNiAwLjctMy4xIDEuOWwtMC40IDIuMXptMTEuMi01LjljMS4yLTEuNCAzLTIgNC44LTJxMC42IDAgMS4yIDAuMSAwLjYgMC4xIDEuMiAwLjMgMC41IDAuMyAxIDAuNiAwLjUgMC40IDAuOSAwLjhsLTMuNSAzLjZjLTAuNi0wLjctMS41LTEuMS0yLjUtMS4xaC0wLjJjLTEuOCAwLjMtMi45IDEuOC0yLjkgMy42djExLjZoLTQuOHYtMTkuM2g0LjZ2MS44em0xMC4zLTQuM3EwLTEuMSAwLjUtMi4xIDAuNC0wLjkgMS4yLTEuNyAwLjctMC43IDEuNy0xLjEgMS0wLjQgMi4xLTAuNGgyLjd2NC4yaC0yYy0xIDAuMS0xLjQgMC45LTEuNCAxLjh2MmgzLjZ2My44aC0zLjZ2MTUuMWgtNC44em0yOS40IDIuM3EwLjggMC4xIDEuNiAwLjQgMC44IDAuMyAxLjQgMC44IDAuNyAwLjUgMS4zIDEuMWMxLjggMS45IDIuMiA0IDIuMiA3LjQgMCAzLjUtMC40IDUuNy0yLjIgNy41LTEuNSAxLjYtMy43IDIuNC01LjkgMi4zcS0wLjggMC0xLjYtMC4xLTAuOC0wLjItMS42LTAuNS0wLjctMC4zLTEuNC0wLjctMC43LTAuNS0xLjMtMWMtMS44LTEuOC0yLjItNC0yLjItNy41IDAtMy4zIDAuNC01LjYgMi4yLTcuNCAxLjUtMS43IDMuNy0yLjQgNS45LTIuNHEwLjggMCAxLjYgMC4xem0xLjggOS43YzAtMS45LTAuMS0zLjctMS4xLTQuNy0xLjItMS4xLTMuMS0xLjEtNC40IDAtMC45IDEtMS4xIDIuOC0xLjEgNC43IDAgMS45IDAuMiAzLjcgMS4xIDQuNyAxLjMgMS4xIDMuMiAxLjEgNC40IDAgMS0xIDEuMS0yLjYgMS4xLTQuN3ptMjcuMy05LjVoNS4ybC01LjkgMTkuM2gtNC4xbC00LTEyLjEtNCAxMi4xaC0zLjlsLTUuOS0xOS4zaDVsMy4yIDExLjkgMy44LTEyaDMuNGw0IDExLjggMy4yLTExLjh6bS00Mi43IDEzLjljMC4yIDAuOCAwLjkgMS4yIDEuNyAxLjFoMS44djQuMWgtMy40cS0xIDAtMi0wLjUtMC45LTAuNC0xLjYtMS4yLTAuNy0wLjgtMS4xLTEuOC0wLjMtMC45LTAuMi0ydi0yMS4yaDQuOHptLTEzNy44LTExLjJoLTIuNnYxMC42YzAgMS44IDAuNyAyLjggMi41IDIuOGgxLjR2Mi4zaC0yYy0zLjEgMC00LjYtMi4yLTQuNi00Ljl2LTE5LjJoMi43djYuMWg1LjF6Ii8+Cgk8cGF0aCBmaWxsPSIjYmNiYmJiIiBkPSJtMzUuNiA0NS41di0xMi40aDUuNXYxNy45aC00MS4xdi0xNy45aDUuNXYxMi40eiIvPgoJPHBhdGggZmlsbD0iI2Y0ODAyNCIgZD0ibTMxLjUgMzUuOGwxLjEtNC4xLTIyLjEtNC41LTAuOSA0LjV6bS0xOC45LTE0LjlsMjAuNSA5LjcgMS45LTQuMi0yMC41LTkuNnptNS44LTEwLjJsMTcuMiAxNC42IDIuOS0zLjUtMTcuNC0xNC42LTIuOSAzLjV6bTExLjEtMTAuOGwtMy43IDIuOCAxMy42IDE4LjMgMy43LTIuN3ptLTE5LjkgMzcuMmgyMS45djQuMWgtMjEuOXoiLz4KPC9zdmc+");
}
.img-color-fill img {
  width: 256px;
  height: auto;
  opacity: 0;
}
<div class="img-color-fill">
  <div></div>
  <img src="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI1NiA1MSI+Cgk8cGF0aCBmaWxsPSIjMjIyNDI2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im02MyAzNi43YzAgMy41LTMuMiA1LjYtNy42IDUuNi0yLjcgMC4yLTUuNC0wLjctNy41LTIuNmwxLjgtMS44YzEuNSAxLjUgMy42IDIuMyA1LjcgMi4yIDMuMSAwIDUtMS4xIDUtMy4zIDAtMS43LTAuOC0yLjYtMy0yLjhsLTMuMS0wLjJjLTMuNS0wLjMtNS40LTItNS40LTUgMC0zLjMgMi43LTUuNCA2LjctNS40cTAuOSAwIDEuNyAwLjEgMC45IDAuMSAxLjcgMC4zIDAuOSAwLjMgMS43IDAuNyAwLjcgMC4zIDEuNSAwLjlsLTEuOCAxLjhjLTEuNC0xLjEtMy4yLTEuNy01LTEuNi0yLjcgMC00LjEgMS4xLTQuMSAzLjEgMCAxLjYgMC45IDIuNiAzLjIgMi43bDMgMC4zYzMuMyAwLjMgNS41IDEuNCA1LjUgNXptMjMuNy03LjJ2MTIuNWgtMi44di0xLjhjLTEuNCAxLjQtMy40IDIuMS01LjMgMi0yLjYgMC00LjEtMC40LTUuMi0xLjctMS0wLjktMS40LTIuMy0xLjQtMy43IDAtMy4zIDIuMi01LjQgNi4zLTUuNGg1LjV2LTEuOGMwLTIuNi0xLjMtNC00LjctNHEtMC42IDAtMS4zIDAtMC43IDAuMS0xLjMgMC40LTAuNiAwLjMtMS4xIDAuNy0wLjUgMC41LTAuOSAxbC0xLjgtMS44YzEuNi0yLjEgMy40LTIuNiA2LjQtMi42IDUgMCA3LjQgMi4yIDcuNiA2LjJ6bS0yLjkgNGgtNS4ycS00LjEgMC00LjEgMy4zYzAgMi4yIDEuMyAzLjIgNC4yIDMuMnEwLjYgMCAxLjEgMCAwLjYtMC4xIDEuMS0wLjIgMC41LTAuMiAxLTAuNCAwLjUtMC4zIDAuOS0wLjdjMC44LTAuOCAxLjEtMiAxLTMuMXptOS01LjdxLTEuNCAyLjMtMS4yIDUtMC4yIDIuNyAxLjIgNC45YzEgMS40IDIuNiAyLjIgNC4zIDIuMSAxLjYgMCAzLjItMC43IDQuMi0yLjFsMS44IDEuOGMtMS41IDEuOC0zLjcgMi45LTYgMi44LTQuNiAwLTguMS0zLjItOC4xLTkuNSAwLTYuNCAzLjQtOS41IDguMS05LjVxMC44LTAuMSAxLjcgMC4xIDAuOCAwLjIgMS42IDAuNSAwLjggMC40IDEuNSAwLjkgMC42IDAuNSAxLjIgMS4ybC0xLjggMS44Yy0xLTEuNC0yLjYtMi4xLTQuMi0yLjEtMS43LTAuMS0zLjMgMC43LTQuMyAyLjF6bTIwLjcgMi40bDcuNyAxMS44aC0zLjNsLTYuMi0xMC4xLTMuMyAzLjR2Ni43aC0yLjd2LTI2LjdoMi43djE2LjRsOC40LTguMmgzLjN6bTIwLjgtNi44cTAuOCAwLjEgMS41IDAuNSAwLjggMC4zIDEuNSAwLjcgMC43IDAuNSAxLjIgMS4xYzEuOCAxLjkgMi4yIDQgMi4yIDcuNCAwIDMuNS0wLjQgNS43LTIuMiA3LjUtMS41IDEuNi0zLjcgMi41LTUuOSAyLjNxLTAuOCAwLTEuNi0wLjEtMC44LTAuMi0xLjUtMC41LTAuOC0wLjMtMS41LTAuNy0wLjctMC41LTEuMy0xYy0xLjctMS44LTIuMi00LTIuMi03LjUgMC0zLjMgMC41LTUuNiAyLjItNy40IDEuNS0xLjcgMy43LTIuNCA1LjktMi40cTAuOCAwIDEuNyAwLjF6bTEuNyA5LjdjMC0xLjktMC4xLTMuNy0xLTQuNy0xLjMtMS4xLTMuMi0xLjEtNC40IDAtMSAxLTEuMSAyLjgtMS4xIDQuNyAwIDIgMC4xIDMuOCAxLjEgNC43IDEuMiAxLjEgMy4xIDEuMSA0LjQgMCAwLjktMC45IDEtMi42IDEtNC43em0yMi42LTkuNmwtNi45IDE5LjNoLTMuN2wtNy4yLTE5LjNoNS4xbDMuOCAxMS44IDMuOS0xMS44em04LTAuMmM1LjQgMCA4LjQgMy45IDguMyA5LjF2Mi4yaC0xMS45djAuNnEwIDAuOCAwLjQgMS41IDAuNCAwLjcgMC45IDEuMiAwLjYgMC41IDEuNCAwLjggMC43IDAuMyAxLjUgMC4yYzEuNiAwLjIgMy4zLTAuNSA0LjQtMS42bDIuOSAyLjdjLTEuOCAyLjEtNC42IDMuMi03LjMgMy4xLTQuNSAwLTguOS0yLjEtOC45LTEwIDAtNi4yIDMuNC05LjYgOC4zLTkuNnptMy41IDhsLTAuNC0yLjFjLTAuNi0xLjItMS44LTEuOS0zLjItMS45LTEuNCAwLTIuNiAwLjctMy4xIDEuOWwtMC40IDIuMXptMTEuMi01LjljMS4yLTEuNCAzLTIgNC44LTJxMC42IDAgMS4yIDAuMSAwLjYgMC4xIDEuMiAwLjMgMC41IDAuMyAxIDAuNiAwLjUgMC40IDAuOSAwLjhsLTMuNSAzLjZjLTAuNi0wLjctMS41LTEuMS0yLjUtMS4xaC0wLjJjLTEuOCAwLjMtMi45IDEuOC0yLjkgMy42djExLjZoLTQuOHYtMTkuM2g0LjZ2MS44em0xMC4zLTQuM3EwLTEuMSAwLjUtMi4xIDAuNC0wLjkgMS4yLTEuNyAwLjctMC43IDEuNy0xLjEgMS0wLjQgMi4xLTAuNGgyLjd2NC4yaC0yYy0xIDAuMS0xLjQgMC45LTEuNCAxLjh2MmgzLjZ2My44aC0zLjZ2MTUuMWgtNC44em0yOS40IDIuM3EwLjggMC4xIDEuNiAwLjQgMC44IDAuMyAxLjQgMC44IDAuNyAwLjUgMS4zIDEuMWMxLjggMS45IDIuMiA0IDIuMiA3LjQgMCAzLjUtMC40IDUuNy0yLjIgNy41LTEuNSAxLjYtMy43IDIuNC01LjkgMi4zcS0wLjggMC0xLjYtMC4xLTAuOC0wLjItMS42LTAuNS0wLjctMC4zLTEuNC0wLjctMC43LTAuNS0xLjMtMWMtMS44LTEuOC0yLjItNC0yLjItNy41IDAtMy4zIDAuNC01LjYgMi4yLTcuNCAxLjUtMS43IDMuNy0yLjQgNS45LTIuNHEwLjggMCAxLjYgMC4xem0xLjggOS43YzAtMS45LTAuMS0zLjctMS4xLTQuNy0xLjItMS4xLTMuMS0xLjEtNC40IDAtMC45IDEtMS4xIDIuOC0xLjEgNC43IDAgMS45IDAuMiAzLjcgMS4xIDQuNyAxLjMgMS4xIDMuMiAxLjEgNC40IDAgMS0xIDEuMS0yLjYgMS4xLTQuN3ptMjcuMy05LjVoNS4ybC01LjkgMTkuM2gtNC4xbC00LTEyLjEtNCAxMi4xaC0zLjlsLTUuOS0xOS4zaDVsMy4yIDExLjkgMy44LTEyaDMuNGw0IDExLjggMy4yLTExLjh6bS00Mi43IDEzLjljMC4yIDAuOCAwLjkgMS4yIDEuNyAxLjFoMS44djQuMWgtMy40cS0xIDAtMi0wLjUtMC45LTAuNC0xLjYtMS4yLTAuNy0wLjgtMS4xLTEuOC0wLjMtMC45LTAuMi0ydi0yMS4yaDQuOHptLTEzNy44LTExLjJoLTIuNnYxMC42YzAgMS44IDAuNyAyLjggMi41IDIuOGgxLjR2Mi4zaC0yYy0zLjEgMC00LjYtMi4yLTQuNi00Ljl2LTE5LjJoMi43djYuMWg1LjF6Ii8+Cgk8cGF0aCBmaWxsPSIjYmNiYmJiIiBkPSJtMzUuNiA0NS41di0xMi40aDUuNXYxNy45aC00MS4xdi0xNy45aDUuNXYxMi40eiIvPgoJPHBhdGggZmlsbD0iI2Y0ODAyNCIgZD0ibTMxLjUgMzUuOGwxLjEtNC4xLTIyLjEtNC41LTAuOSA0LjV6bS0xOC45LTE0LjlsMjAuNSA5LjcgMS45LTQuMi0yMC41LTkuNnptNS44LTEwLjJsMTcuMiAxNC42IDIuOS0zLjUtMTcuNC0xNC42LTIuOSAzLjV6bTExLjEtMTAuOGwtMy43IDIuOCAxMy42IDE4LjMgMy43LTIuN3ptLTE5LjkgMzcuMmgyMS45djQuMWgtMjEuOXoiLz4KPC9zdmc+">
</div>

Upvotes: 0

Jules Colle
Jules Colle

Reputation: 11939

Edit august 2023: This answer can cause problems in iOS. Seems like iPhones can cut off or not display the shadow at all, because it doesn't find the original image inside the viewport. If this solution isn't working for you check out this one which seems to work fine on all platforms and in all browsers (except IE but who cares): https://stackoverflow.com/a/76821538/296430

You can drop a shadow with any color you like, and move the original image out of view.

.png-container {
  overflow: hidden;
}

.png-container img {  
  filter: drop-shadow(0px 1000px 0 red);
  transform: translateY(-1000px);
}
<div class="png-container">
  <img src="https://i0.wp.com/opensource.org/wp-content/uploads/2023/03/cropped-OSI-horizontal-large.png?fit=640%2C229&ssl=1" width="128" height="46">
</div>

Source

Upvotes: 12

Jules Colle
Jules Colle

Reputation: 11939

EDIT July 2023: when I wrote this answer, more than 10 years ago, CSS filters where not a thing yet, but now it's quite easy to to drop a shadow on a PNG image, and give it the desired color. Check my new answer here: https://stackoverflow.com/a/76648616/296430

You might want to take a look at Icon fonts. http://css-tricks.com/examples/IconFont/

EDIT: I'm using Font-Awesome on my latest project. You can even bootstrap it. Simply put this in your <head>:

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">

<!-- And if you want to support IE7, add this aswell -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet">

And then go ahead and add some icon-links like this:

<a class="icon-thumbs-up"></a>

Here's the full cheat sheet

--edit--

Font-Awesome uses different class names in the new version, probably because this makes the CSS files drastically smaller, and to avoid ambiguous css classes. So now you should use:

<a class="fa fa-thumbs-up"></a>

EDIT 2:

Just found out github also uses its own icon font: Octicons It's free to download. They also have some tips on how to create your very own icon fonts.

EDIT 3:

Seems like Octicons still exist. However it's no longer available as an icon font but only as a collection of SVG images. SVG is the way to go now, but if you still want to color a PNG image, I came up with this technique: https://stackoverflow.com/a/76648616/296430

Upvotes: 61

Chris
Chris

Reputation: 9

Edit: i got confused as to my solution.. you dont gotta change the image at all. just use the png you wanted to. just make a blank image tag with the dimensions you want.

<img class="image" width="x" height="y"/>

then in css you can

.image {
    background-color: rgba(); <--color you wanted the png to be
    -webkit-mask-image: url(/image.png);
    mask-image: url(/image.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100%;
    mask-size: 100%;
}

this allows you to change the BG color at will to whatever you want, but it will be in the shape of the blank/white png. results example

Upvotes: 0

Umair Mustafa
Umair Mustafa

Reputation: 61

For Solid Images you can use this website just paste your color and copy filter and paste on image class in css and color of image will be changed accordingly. In this case the images is in red color with filter it changed to yellow. It is very use full in case of svg images.

img{
  filter: brightness(0) saturate(100%) invert(70%) sepia(97%) saturate(925%) hue-rotate(353deg)     brightness(102%) contrast(102%);
  width: 400px;
}
<div>
  <img class=my_img" src="https://images.twinkl.co.uk/tr/image/upload/t_illustration/illustation/particle-arrangement-in-a-solid.png">
</div>

Upvotes: 3

MiMFa
MiMFa

Reputation: 1174

It's a way I use and works perfectly:

.RedImage {
  filter:
    brightness(1000%) grayscale(100%) /* To change the image color to the white */
    opacity(0.1) /* To apply the color all over the image */
    drop-shadow(0 0 0 red) /* To apply my costum color */
    drop-shadow(0 0 0 red) /* To apply my costum color more stronger */
    drop-shadow(0 0 0 red)
    drop-shadow(0 0 0 red)
    drop-shadow(0 0 0 red);
}
<img class="RedImage" height="50px" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png" />

Enjoy...

Upvotes: 1

Jaider
Jaider

Reputation: 14954

  1. If the image is simple like vector images, you can converted to SVG and do CSS changes there.
  2. Another option make the image PNG, and change a specific color to transparent (like cut-outs) and change the background color using CSS.

Upvotes: 0

KWallace
KWallace

Reputation: 1700

You could use filter: hue-rotate(Ndeg), but if the image is black and white, the hue will never change.

However, you could combine it with filter: sepia(100). That will add color to the image that the hue-rotate filter CAN change.

Sepia adds a rather desaturated color, so enhance that a bit with filter: saturate(50); That makes it a deeper color that hue-rotate can better work with.

Then combine them all together:

filter: sepia(100) saturate(50) hue-rotate(280deg)

Then experiment with the rotation degrees until you find your preferred color.

Upvotes: 2

Lotanna Kyrian
Lotanna Kyrian

Reputation: 119

/* change image color to white */
filter: invert(100%) sepia(16%) saturate(7463%) hue-rotate(222deg) brightness(119%) contrast(115%);

/* change image color to red */`
filter: invert(16%) sepia(99%) saturate(7404%) hue-rotate(4deg) brightness(95%) contrast(118%);

/* change image color to green */
filter: invert(26%) sepia(89%) saturate(1583%) hue-rotate(95deg) brightness(96%) contrast(106%);

/* change image color to blue */
filter: invert(10%) sepia(90%) saturate(5268%) hue-rotate(245deg) brightness(109%) contrast(155%);

Upvotes: 10

Fadi Abo Msalam
Fadi Abo Msalam

Reputation: 7197

I found this great codepen example that you insert your hex color value and it returns the needed filter to apply this color to png

CSS filter generator to convert from black to target hex color

for example i needed my png to have the following color #1a9790

then you have to apply the following filter to you png

filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);

PS: The codepen is based on this brilliant answer by MultiplyByZer0 here: How to transform black into any given color using only CSS filters

all credits goes to him :clap:

Upvotes: 458

Salix
Salix

Reputation: 1383

Answering because I was looking for a solution for this.

the pen in @chrscblls answer works well if you have a white or black background, but mine wasn't. Aslo, the images were generated with ng-repeat, so I couldn't have their url in my css AND you can't use ::after on img tags.

So, I figured a work around and thought it might help people if they too stumble here.

So what I did is pretty much the same with three main differences:

  • the url being in my img tag, I put it(and a label) in another div on which ::after will work.
  • the 'mix-blend-mode' is set at 'difference' instead of 'multiply' or 'screen'.
  • I added a ::before with exactly the same value so the ::after would do the 'difference' of the 'difference' made by the ::before and cancelled it-self.

To change it from black to white or white to black the background color need to be white. From black to colors, you can choose whatever color. From white to colors tho, you'll need to choose the opposite color of the one you want.

.divClass{
   position: relative;
   width: 100%;
   height: 100%;
   text-align: left;
}
.divClass:hover::after, .divClass:hover::before{
   position: absolute;
   width: 100%;
   height: 100%;
   background: #FFF;
   mix-blend-mode: difference;
   content: "";
}

https://codepen.io/spaceplant/pen/oZyMYG

Since I posted this answer I made an other pen using a different method :

* {
  box-sizing: border-box;
}

body {
  background-color: CadetBlue;
  font-family: "Lato", sans-serif;
  text-align: center;
}
button {
  display: flex;
  justify-content: center;
  min-width: 182px;
  padding: 0.5em 1em;
  margin: 2em auto;
  cursor: pointer;
  pointer-events: auto;
  border-radius: 4px;
  border: none;
  background: #85b5b7;
  box-shadow: 0 6px #6fa8aa;
}
label {
  font-weight: 400;
  font-size: 24px;
  margin: auto 0;
  color: white;
}

.icon {
  height: 64px;
  width: 64px;
  background-color: white;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: left center;
          mask-position: left center;
  -webkit-mask-size: auto 48px;
          mask-size: auto 48px;
          mask-mode: luminance;
  -webkit-mask-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Bubbles-alt-icon.png/640px-Bubbles-alt-icon.png");
          mask-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Bubbles-alt-icon.png/640px-Bubbles-alt-icon.png");
}
button label span {
  color: #395f60;
}
button:hover {
  color: #395f60;
  transform: translatey(4px);
  box-shadow: 0 2px #6fa8aa;
}
button:hover .icon {
  background-color: #395f60;
}
<button>
  <div class="icon"></div>
  <label> white to <span>color</span></label>
</button>

Upvotes: 8

Adam Pietrasiak
Adam Pietrasiak

Reputation: 13224

The solution that worked for me was using filter: drop-shadow

filter: drop-shadow works differently than regular box-shadow.

filter one applies shadow to real shape (so it supports transparent images).

The trick now is to 'hide' real image and show only the shadow.

https://jsfiddle.net/d4m8x0qb/2

enter image description here

Note that my use case is modifying icons colors into one, solid color, so this approach works for me, but might not for other use cases

Upvotes: 5

Khalid Hossen
Khalid Hossen

Reputation: 91

Use this great codepen example that you insert your hex color value and it returns the needed filter to apply this color to png

CSS filter generator to convert from black to target hex color

for example i needed my png to have the following color #EF8C57

then you have to apply the following filter to you png Result:

filter: invert(76%) sepia(30%) saturate(3461%) hue-rotate(321deg) brightness(98%) contrast(91%);

Upvotes: 8

Vijay Chauhan
Vijay Chauhan

Reputation: 1312

Try this:

 -webkit-filter: brightness(0) invert(1);
 filter: brightness(0) invert(1);

Upvotes: 8

РАВИ
РАВИ

Reputation: 12215

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

Source

Upvotes: 792

Samuel stankiewicz
Samuel stankiewicz

Reputation: 192

When changing a picture from black to white, or white to black the hue rotate filter does not work, because black and white are not technically colors. Instead, black and white color changes (from black to white or vice-versa) must be done with the invert filter property.

.img1 { filter: invert(100%); }

Upvotes: 17

Mahdi Bashirpour
Mahdi Bashirpour

Reputation: 18873

body{
  background: #333 url(/images/classy_fabric.png);
  width: 430px;
  margin: 0 auto;
  padding: 30px;
}
.preview{
  background: #ccc;
  width: 415px;
  height: 430px;
  border: solid 10px #fff;
}

input[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 25px;
  height: 25px;
  margin: 5px 0 5px 5px;
  background-size: 225px 70px;
  position: relative;
  float: left;
  display: inline;
  top: 0;
  border-radius: 3px;
  z-index: 99999;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000;
}

input[type='radio']:hover{
  -webkit-filter: opacity(.4);
  filter: opacity(.4);    
}

.red{
  background: red;
}

.red:checked{
  background: linear-gradient(brown, red)
}

.green{
  background: green;
}

.green:checked{
  background: linear-gradient(green, lime);
}

.yellow{
  background: yellow;
}

.yellow:checked{
  background: linear-gradient(orange, yellow);
}

.purple{
  background: purple;
}

.pink{
  background: pink;
}

.purple:checked{
  background: linear-gradient(purple, violet);
}

.red:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 red);
  filter: opacity(.5) drop-shadow(0 0 0 red);
}

.green:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 green);
  filter: opacity(.5) drop-shadow(0 0 0 green);
}

.yellow:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow);
  filter: opacity(.5) drop-shadow(0 0 0 yellow);
}

.purple:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 purple);
  filter: opacity(.5) drop-shadow(0 0 0 purple);
}

.pink:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 pink);
  filter: opacity(.5) drop-shadow(0 0 0 pink);
}


img{
  width: 394px;
  height: 375px;
  position: relative;
}

.label{
  width: 150px;
  height: 75px;
  position: absolute;
  top: 170px;
  margin-left: 130px;
}

::selection{
  background: #000;
}
<div class="preview">
  <input class='red' name='color' type='radio' />
  <input class='green' name='color' type='radio' />
    <input class='pink' name='color' type='radio' />
  <input checked class='yellow' name='color' type='radio' />
  <input class='purple' name='color' type='radio' />  
  <img src="https://i.sstatic.net/bd7VJ.png"/>
</div>

Source: https://codepen.io/taryaoui/pen/EKkcu

Upvotes: 6

Rehmat
Rehmat

Reputation: 2299

The simplest one line that worked for me:

filter: opacity(0.5) drop-shadow(0 0 0 blue);

You can adjust opacity from 0 to 1 to make color lighter or darker.

Upvotes: 63

Muthukumar Anbalagan
Muthukumar Anbalagan

Reputation: 1178

I found this while googling, I found best working for me...

HTML

<div class="img"></div>

CSS

.img {
  background-color: red;
  width: 60px;
  height: 60px;
   -webkit-mask-image: url('https://i.sstatic.net/gZvK4.png');
}

http://jsfiddle.net/a63b0exm/

Upvotes: 10

rolznz
rolznz

Reputation: 879

I required a specific colour, so filter didn't work for me.

Instead, I created a div, exploiting CSS multiple background images and the linear-gradient function (which creates an image itself). If you use the overlay blend mode, your actual image will be blended with the generated "gradient" image containing your desired colour (here, #BADA55)

.colored-image {
        background-image: linear-gradient(to right, #BADA55, #BADA55), url("https://i.imgur.com/lYXT8R6.png");
        background-blend-mode: overlay;
        background-size: contain;
        width: 200px;
        height: 200px;        
    }
<div class="colored-image"></div>

Upvotes: 7

chrscblls
chrscblls

Reputation: 625

Think I have a solution for this that's a) exactly what you were looking for 5 years ago, and b) is a bit simpler than the other code options here.

With any white png (eg, white icon on transparent background), you can add an ::after selector to recolor.

.icon {
    background: url(img/icon.png); /* Your icon */
    position: relative; /* Allows an absolute positioned psuedo element */
}

.icon::after{
    position: absolute; /* Positions psuedo element relative to .icon */
    width: 100%; /* Same dimensions as .icon */
    height: 100%;
    content: ""; /* Allows psuedo element to show */
    background: #EC008C; /* The color you want the icon to change to */
    mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
}

See this codepen (applying the color swap on hover): http://codepen.io/chrscblls/pen/bwAXZO

Upvotes: 23

John Slegers
John Slegers

Reputation: 47111

In most browsers, you can use filters :

  • on both <img> elements and background images of other elements

  • and set them either statically in your CSS, or dynamically using JavaScript

See demos below.

<img> elements

You can apply this technique to a <img> element :

#original, #changed {
    width: 45%;
    padding: 2.5%;
    float: left;
}

#changed {
    -webkit-filter : hue-rotate(180deg);
    filter : hue-rotate(180deg);
}
<img id="original" src="https://i.sstatic.net/rfar2.jpg" />

<img id="changed" src="https://i.sstatic.net/rfar2.jpg" />

Background images

You can apply this technique to a background image :

#original, #changed {
    background: url('https://i.sstatic.net/kaKzj.jpg');
    background-size: cover;
    width: 30%;
    margin: 0 10% 0 10%;
    padding-bottom: 28%;
    float: left;
}

#changed {
    -webkit-filter : hue-rotate(180deg);
    filter : hue-rotate(180deg);
}
<div id="original"></div>

<div id="changed"></div>

JavaScript

You can use JavaScript to set a filter at runtime :

var element = document.getElementById("changed");
var filter = 'hue-rotate(120deg) saturate(2.4)';
element.style['-webkit-filter'] = filter;
element.style['filter'] = filter;
#original, #changed {
    margin: 0 10%;
    width: 30%;
    float: left;
    background: url('https://i.sstatic.net/856IQ.png');
    background-size: cover;
    padding-bottom: 25%;
}
<div id="original"></div>

<div id="changed"></div>

Upvotes: 21

Vasan Jiaramaneetwesin
Vasan Jiaramaneetwesin

Reputation: 563

I've been able to do this using SVG filter. You can write a filter that multiplies the color of source image with the color you want to change to. In the code snippet below, flood-color is the color we want to change image color to (which is Red in this case.) feComposite tells the filter how we're processing the color. The formula for feComposite with arithmetic is (k1*i1*i2 + k2*i1 + k3*i2 + k4) where i1 and i2 are input colors for in/in2 accordingly. So specifying only k1=1 means it will do just i1*i2, which means multiplying both input colors together.

Note: This only works with HTML5 since this is using inline SVG. But I think you might be able to make this work with older browser by putting SVG in a separate file. I haven't tried that approach yet.

Here's the snippet: 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask1">
      <feFlood flood-color="#ff0000" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="https://i.sstatic.net/OyP0g.jpg" filter="url(#colorMask1)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask2">
      <feFlood flood-color="#00ff00" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="https://i.sstatic.net/OyP0g.jpg" filter="url(#colorMask2)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask3">
      <feFlood flood-color="#0000ff" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="https://i.sstatic.net/OyP0g.jpg" filter="url(#colorMask3)" />
</svg>

Upvotes: 52

beta208
beta208

Reputation: 627

To literally change the color, you could incorporate a CSS transition with a -webkit-filter where when something happens you would invoke the -webkit-filter of your choice. For example:

img {
    -webkit-filter:grayscale(0%);
    transition: -webkit-filter .3s linear;
    }
img:hover 
    {
    -webkit-filter:grayscale(75%);
    }

Upvotes: 2

benhowdle89
benhowdle89

Reputation: 37504

Yes :)

Surfin' Safari - Blog Archive » CSS Masks

WebKit now supports alpha masks in CSS. Masks allow you to overlay the content of a box with a pattern that can be used to knock out portions of that box in the final display. In other words, you can clip to complex shapes based off the alpha of an image.
[...]
We have introduced new properties to provide Web designers with a lot of control over these masks and how they are applied. The new properties are analogous to the background and border-image properties that already exist.

-webkit-mask (background)
-webkit-mask-attachment (background-attachment)
-webkit-mask-clip (background-clip)
-webkit-mask-origin (background-origin)
-webkit-mask-image (background-image)
-webkit-mask-repeat (background-repeat)
-webkit-mask-composite (background-composite)
-webkit-mask-box-image (border-image)

Upvotes: 24

Pere
Pere

Reputation: 1075

There's no need for a whole font set if you only need one icon, plus I feel it being more "clean" as an individual element. So, for this purpose, in HTML5 you can place a SVG directly inside the document flow. Then you can define a class in your .CSS stylesheet and access its background color with the fill property:

Working fiddle: http://jsfiddle.net/qmsj0ez1/

Note that, in the example, I've used :hoverto illustrate the behaviour; if you just want to change color for the "normal" state, you should remove the pseudoclass.

Upvotes: 3

Related Questions