Change color of PNG image via CSS

Question

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

User · Answer

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.

User · Answer

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

User · Answer

x000D   x000D  body  x000D    background   333 url  images classy fabric png   x000D    width  430px  x000D    margin  0 auto  x000D    padding  30px  x000D    x000D   preview  x000D    background   ccc  x000D    width  415px  x000D    height  430px  x000D    border  solid 10px  fff  x000D    x000D   x000D  input type  radio     x000D    -webkit-appearance  none  x000D    -moz-appearance  none  x000D    width  25px  x000D    height  25px  x000D    margin  5px 0 5px 5px  x000D    background-size  225px 70px  x000D    position  relative  x000D    float  left  x000D    display  inline  x000D    top  0  x000D    border-radius  3px  x000D    z-index  99999  x000D    cursor  pointer  x000D    box-shadow  1px 1px 1px  000  x000D    x000D   x000D  input type  radio   hover  x000D    -webkit-filter  opacity  4   x000D    filter  opacity  4       x000D    x000D   x000D   red  x000D    background  red  x000D    x000D   x000D   red checked  x000D    background  linear-gradient brown  red  x000D    x000D   x000D   green  x000D    background  green  x000D    x000D   x000D   green checked  x000D    background  linear-gradient green  lime   x000D    x000D   x000D   yellow  x000D    background  yellow  x000D    x000D   x000D   yellow checked  x000D    background  linear-gradient orange  yellow   x000D    x000D   x000D   purple  x000D    background  purple  x000D    x000D   x000D   pink  x000D    background  pink  x000D    x000D   x000D   purple checked  x000D    background  linear-gradient purple  violet   x000D    x000D   x000D   red checked   img  x000D    -webkit-filter  opacity  5  drop-shadow 0 0 0 red   x000D    filter  opacity  5  drop-shadow 0 0 0 red   x000D    x000D   x000D   green checked   img  x000D    -webkit-filter  opacity  5  drop-shadow 0 0 0 green   x000D    filter  opacity  5  drop-shadow 0 0 0 green   x000D    x000D   x000D   yellow checked   img  x000D    -webkit-filter  opacity  5  drop-shadow 0 0 0 yellow   x000D    filter  opacity  5  drop-shadow 0 0 0 yellow   x000D    x000D   x000D   purple checked   img  x000D    -webkit-filter  opacity  5  drop-shadow 0 0 0 purple   x000D    filter  opacity  5  drop-shadow 0 0 0 purple   x000D    x000D   x000D   pink checked   img  x000D    -webkit-filter  opacity  5  drop-shadow 0 0 0 pink   x000D    filter  opacity  5  drop-shadow 0 0 0 pink   x000D    x000D   x000D   x000D  img  x000D    width  394px  x000D    height  375px  x000D    position  relative  x000D    x000D   x000D   label  x000D    width  150px  x000D    height  75px  x000D    position  absolute  x000D    top  170px  x000D    margin-left  130px  x000D    x000D   x000D    selection  x000D    background   000  x000D    x000D   lt div class  preview  gt  x000D     lt input class  red  name  color  type  radio    gt  x000D     lt input class  green  name  color  type  radio    gt  x000D       lt input class  pink  name  color  type  radio    gt  x000D     lt input checked class  yellow  name  color  type  radio    gt  x000D     lt input class  purple  name  color  type  radio    gt    x000D     lt img src  https   i stack imgur com bd7VJ png   gt  x000D   lt  div gt  x000D   x000D   x000D    Source  https   codepen io taryaoui pen EKkcu

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

The img tag has a background property just like any other  If you have a white PNG with a transparent shape  like a stencil  then you can do this    lt img src   stencil png  style   background-color  red  gt

User · Answer

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   x000D   x000D  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      x000D   lt  --- 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 -- gt   lt img alt  Mona Lisa  src  https   images pexels com photos 40997 mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997 jpeg auto compress amp cs tinysrgb amp dpr 3 amp h 750 amp w 1260  title  original  gt   lt img alt  Mona Lisa  src  https   images pexels com photos 40997 mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997 jpeg auto compress amp cs tinysrgb amp dpr 3 amp h 750 amp w 1260  title  saturate  class  saturate  gt   lt img alt  Mona Lisa  src  https   images pexels com photos 40997 mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997 jpeg auto compress amp cs tinysrgb amp dpr 3 amp h 750 amp w 1260  title  grayscale  class  grayscale  gt   lt img alt  Mona Lisa  src  https   images pexels com photos 40997 mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997 jpeg auto compress amp cs tinysrgb amp dpr 3 amp h 750 amp w 1260  title  contrast  class  contrast  gt   lt img alt  Mona Lisa  src  https   images pexels com photos 40997 mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997 jpeg auto compress amp cs tinysrgb amp dpr 3 amp h 750 amp w 1260  title  brightness  class  brightness  gt   lt img alt  Mona Lisa  src  https   images pexels com photos 40997 mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997 jpeg auto compress amp cs tinysrgb amp dpr 3 amp h 750 amp w 1260  title  blur  class  blur  gt   lt img alt  Mona Lisa  src  https   images pexels com photos 40997 mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997 jpeg auto compress amp cs tinysrgb amp dpr 3 amp h 750 amp w 1260  title  invert  class  invert  gt   lt img alt  Mona Lisa  src  https   images pexels com photos 40997 mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997 jpeg auto compress amp cs tinysrgb amp dpr 3 amp h 750 amp w 1260  title  sepia  class  sepia  gt   lt img alt  Mona Lisa  src  https   images pexels com photos 40997 mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997 jpeg auto compress amp cs tinysrgb amp dpr 3 amp h 750 amp w 1260  title  huerotate  class  huerotate  gt   lt img alt  Mona Lisa  src  https   images pexels com photos 40997 mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997 jpeg auto compress amp cs tinysrgb amp dpr 3 amp h 750 amp w 1260  title  opacity  class  rss opacity  gt  x000D   x000D   x000D   Source

User · Answer

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

User · Answer

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

User · Answer

I found this while googling  I found best working for me     HTML   lt div class  img  gt  lt  div gt    CSS   img     background-color  red    width  60px    height  60px     -webkit-mask-image  url  http   i stack imgur com gZvK4 png        http   jsfiddle net a63b0exm

User · Answer

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

User · Answer

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   x000D   x000D   lt svg xmlns  http   www w3 org 2000 svg  version  1 1  width  60  height  90  style  float left  gt  x000D     lt defs gt  x000D       lt filter id  colorMask1  gt  x000D         lt feFlood flood-color   ff0000  result  flood    gt  x000D         lt feComposite in  SourceGraphic  in2  flood  operator  arithmetic  k1  1  k2  0  k3  0  k4  0    gt  x000D       lt  filter gt  x000D     lt  defs gt  x000D     lt image width  100   height  100   xlink href  http   i stack imgur com OyP0g jpg  filter  url  colorMask1     gt  x000D   lt  svg gt  x000D   lt svg xmlns  http   www w3 org 2000 svg  version  1 1  width  60  height  90  style  float left  gt  x000D     lt defs gt  x000D       lt filter id  colorMask2  gt  x000D         lt feFlood flood-color   00ff00  result  flood    gt  x000D         lt feComposite in  SourceGraphic  in2  flood  operator  arithmetic  k1  1  k2  0  k3  0  k4  0    gt  x000D       lt  filter gt  x000D     lt  defs gt  x000D     lt image width  100   height  100   xlink href  http   i stack imgur com OyP0g jpg  filter  url  colorMask2     gt  x000D   lt  svg gt  x000D   lt svg xmlns  http   www w3 org 2000 svg  version  1 1  width  60  height  90  style  float left  gt  x000D     lt defs gt  x000D       lt filter id  colorMask3  gt  x000D         lt feFlood flood-color   0000ff  result  flood    gt  x000D         lt feComposite in  SourceGraphic  in2  flood  operator  arithmetic  k1  1  k2  0  k3  0  k4  0    gt  x000D       lt  filter gt  x000D     lt  defs gt  x000D     lt image width  100   height  100   xlink href  http   i stack imgur com OyP0g jpg  filter  url  colorMask3     gt  x000D   lt  svg gt  x000D   x000D   x000D

User · Answer

In most browsers  you can use filters     on both  lt img gt  elements and background images of other elements and set them either statically in your CSS  or dynamically using JavaScript   See demos below      lt img gt  elements  You can apply this technique to a  lt img gt  element     x000D   x000D   original   changed   x000D      width  45   x000D      padding  2 5   x000D      float  left  x000D    x000D   x000D   changed   x000D      -webkit-filter   hue-rotate 180deg   x000D      filter   hue-rotate 180deg   x000D    x000D   lt img id  original  src  http   i stack imgur com rfar2 jpg    gt  x000D   x000D   lt img id  changed  src  http   i stack imgur com rfar2 jpg    gt  x000D   x000D   x000D    Background images  You can apply this technique to a background image     x000D   x000D   original   changed   x000D      background  url  http   i stack imgur com kaKzj jpg    x000D      background-size  cover  x000D      width  30   x000D      margin  0 10  0 10   x000D      padding-bottom  28   x000D      float  left  x000D    x000D   x000D   changed   x000D      -webkit-filter   hue-rotate 180deg   x000D      filter   hue-rotate 180deg   x000D    x000D   lt div id  original  gt  lt  div gt  x000D   x000D   lt div id  changed  gt  lt  div gt  x000D   x000D   x000D    JavaScript  You can use JavaScript to set a filter at runtime     x000D   x000D  var element   document getElementById  changed    x000D  var filter    hue-rotate 120deg  saturate 2 4    x000D  element style  -webkit-filter     filter  x000D  element style  filter     filter  x000D   original   changed   x000D      margin  0 10   x000D      width  30   x000D      float  left  x000D      background  url  http   i stack imgur com 856IQ png    x000D      background-size  cover  x000D      padding-bottom  25   x000D    x000D   lt div id  original  gt  lt  div gt  x000D   x000D   lt div id  changed  gt  lt  div gt  x000D   x000D   x000D

User · Answer

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    x000D   x000D   colored-image   x000D          background-image  linear-gradient to right   BADA55   BADA55   url  https   i imgur com lYXT8R6 png    x000D          background-blend-mode  overlay  x000D          background-size  contain  x000D          width  200px  x000D          height  200px          x000D        x000D   lt div class  colored-image  gt  lt  div gt  x000D   x000D   x000D

[css] Change color of PNG image via CSS?

Examples related to css

Examples related to image

Examples related to colors

Examples related to png

Examples related to overlay