704

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?

3
  • 9
    You can set background-color CSS property. You can create non-transparent part that will be fixed, and transparent part of image which will be filled by any color you like via CSS. Is that what you want to achieve?
    – jakub.g
    Sep 14, 2011 at 11:58
  • 2
    You can use psuedo-elements with a blending mode to recolor any icon that is 100% black or 100% white (background stays transparent). See my answer here: stackoverflow.com/a/39796437/1472114
    – chrscblls
    Sep 30, 2016 at 18:58
  • 2
    For those looking for an actual, up-to-date answer that doesn't involve those ghastly "filters" which are totally not meant for this, look no further than: stackoverflow.com/a/32736304/671092 You can skip the rest: you're welcome.
    – gd1
    Feb 14, 2021 at 21:09

29 Answers 29

756

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

20
  • 16
    So short answer is that there isn't any general solution for the majority of browsers. Jul 10, 2014 at 8:42
  • 27
    But will huerotate or saturate actually do anthing to a white image?
    – ki9
    Feb 28, 2016 at 23:05
  • 6
    2016 Update: this now works in almost all browsers except IE: caniuse.com/#feat=css-filters
    – Stan
    Mar 10, 2016 at 19:59
  • 6
    @datatype_void Sometimes you don't control the starting image yourself. So, it seems that you agree that my point is valid, you can't get to any color starting from black or white. Oh, and I played for way more than 5 minutes to reach this conclusion. Jul 19, 2016 at 12:15
  • 11
    also specify that you can do stuff like this : .gifcorrect{ filter: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); } which means you CAN go from black & transparent or grayscale to color and it works even on animated gifs
    – tatsu
    Sep 20, 2017 at 8:51
422

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:

7
  • 3
    I have change color to white from blue using this code: filter: invert(1%) sepia(1%) saturate(1%) hue-rotate(1deg) brightness(1000%) contrast(80%); Jan 21, 2019 at 6:51
  • 30
    Author deserve a statue! (note the: brightness(0) saturate(100%) optional prepend that kills any doubt) Aug 7, 2019 at 16:07
  • 3
    If anyone needs it, here is a TS conversion of this code gist.github.com/dwjohnston/7e60bf5d4b6c071cd869f9f346241c08
    – dwjohnston
    Oct 15, 2019 at 23:45
  • 2
    This works for black backgrounds or images. For white elements, try fiddling with the invert parameter to get the proper color. Sep 7, 2020 at 16:21
  • 2
    The codepen is based on this brilliant answer by MultiplyByZer0 here: stackoverflow.com/questions/42966641/…
    – zehawk
    Mar 3, 2022 at 10:41
61

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

3
  • 1
    +1 for out of the box thinking. And nowadays there are easy to use online apps to help you create a webfont from an (svg) image. May 26, 2015 at 13:25
  • If <a class="icon-thumbs-up"></a> is the old class name and <a class="fa fa-thumbs-up"></a> is the new one I don't think it makes the CSS smaller, I can see an additional whitespace between fa and fa-thumbs-up, add atleast 1 additional byte on to that CSS file if I'm not mistaken?
    – brandito
    May 28, 2018 at 6:37
  • Font Awesome was great in it's day, unfortunately its render blocking, which makes google and it's users unhappy. We first addressed this by removing unused fonts from both the CSS and the binary font files, reducing data by around half. We're now in the process of removing altogether and replacing with a simple sprite, which is not render blocking (DOM and CSSOM process faster, making elements on page appear faster), and will reduce data by another 75%, down to 6KB. FA is around 100KB. CSS masks may help in our case, but probably unnecessary.
    – Y.K.
    Aug 30, 2018 at 2:33
58

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.

7
  • 10
    repeat drop-shadow 2-3 times to make it stronger
    – djdance
    Oct 21, 2019 at 18:42
  • 1
    wont work to get exact color, it is always some sort of mix between the original color and the new one.
    – swisswiss
    Feb 17, 2020 at 2:20
  • this approach slightly distorts the image and it gets worse every time drop-shadow is applied. Like making a copy of a copy the results are different from the original.
    – SMAG
    Feb 21, 2020 at 21:21
  • 5
    @swisswiss Don't repeat the dropshadow, add a saturate filter with >100% so it looks something like "filter: opacity(0.5) drop-shadow(0 0 0 blue) saturate(1000%);" This does everything with a single pass which will solve the issue that SMAG brings up.
    – Nosajimiki
    Oct 10, 2020 at 4:28
  • Nice hack! Allows me to take any of the nouns project pngs and make them whatever color I want, if I drop-shadow twice. Mar 23, 2021 at 2:35
51

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.stack.imgur.com/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.stack.imgur.com/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.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask3)" />
</svg>

3
  • 11
    Man you are getting robbed on this answer. Anyone looking to colorize images beyond what filter: hue-rotate can do - this is the way to do it. Mar 17, 2017 at 15:21
  • 3
    for icon with alpha, can replace <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> with <feComposite in="flood" in2="SourceAlpha" operator="atop"/> (works on white, color and black)
    – Salix
    Jan 23, 2022 at 20:38
  • 1
    @Salix exactly what I was looking for to emulate iOS image tinting - thanks!
    – Aaron Ash
    May 10, 2022 at 11:34
24

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)
2
  • 1
    Is that part of any (yet-to-come) standard, as I didn't found any information unrelated to Webkit, or is it just Apple-flavour? It seems that the W3 is suggesting SVG for such usecases: w3.org/TR/SVG/masking.html
    – feeela
    Sep 14, 2011 at 12:04
  • 3
    Sadly this seems to be webkit only and the blog cheats by using composited images rather than actual examples. This answer is a bit of red herring. Nov 4, 2013 at 18:05
21

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

3
  • I rehosted the image off of imgur, was having some troubles loading it.
    – chrscblls
    Oct 7, 2016 at 17:29
  • In the latest version of Chrome, it looks like the (transparent) background is also getting set to the color. In the linked example, when I hover, I just see an opaque pink square... Works well in Firefox.
    – logidelic
    Jun 5, 2017 at 15:49
  • 7
    @chrscblls The link is dead.
    – Steven Lu
    Jul 2, 2018 at 17:40
20

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.stack.imgur.com/rfar2.jpg" />

<img id="changed" src="https://i.stack.imgur.com/rfar2.jpg" />

Background images

You can apply this technique to a background image :

#original, #changed {
    background: url('https://i.stack.imgur.com/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.stack.imgur.com/856IQ.png');
    background-size: cover;
    padding-bottom: 25%;
}
<div id="original"></div>

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

1
  • 7
    The question was about colorizing a white image with a transparent background. hue-rotate does not work on white.
    – Synetech
    Jan 11, 2017 at 3:47
19

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:

<img src= 'stencil.png' style= 'background-color: red'>
4
  • 166
    I want the white part colored differently, not the transparent part.
    – user429620
    Sep 15, 2011 at 13:04
  • 2
    best solution I found so far. Too bad it will only work if you use a solid background-color on your websites Nov 13, 2012 at 8:17
  • 8
    @Wesley you need to invert the image then (so the white bit becomes transparent and the rest white) which you can do using your favourite image editor and masks. Nov 4, 2013 at 18:07
  • 5
    @CharlesGoodwin That only works then the image is placed in a white background.
    – Alex
    Mar 12, 2018 at 18:01
16

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%); }

10

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.stack.imgur.com/gZvK4.png');
}

http://jsfiddle.net/a63b0exm/

2
9
/* 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%);
2
  • 1
    I just played with your samples and got what I wanted. Thanks. Oct 3, 2022 at 19:28
  • How were these colors calculated? I'd like to try other colors but can't work out how to generalize this. Oct 19, 2022 at 15:46
8

Try this:

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

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>

4
  • This solution does not allow anything to be 'under the icon' as it has solid background when changing the color Dec 13, 2021 at 9:14
  • On the codepen linked, there's a link to an updated version using mask which works better and solve that problem.
    – Salix
    Dec 18, 2021 at 19:15
  • @AdamPietrasiak Added link to pen and a snippet example. This method allow things under and, once every other browser catch up to firefox, to use luminence as alpha too!
    – Salix
    Dec 19, 2021 at 12:48
  • oops haha, forgot what my original problem was, and this doesn't fix it since I couldn't have the url in my css... Well, guess I can add it with JS but I liked that I didn't have to ^^'
    – Salix
    Jan 23, 2022 at 18:41
7

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>

2
  • Didn't work for me. I can't tell why, I copy pasted exactly May 15, 2019 at 14:27
  • @VicSeedoubleyew the snippet works fine. Inspect your div using dev tools to ensure your CSS is actually being applied. Also, make sure the URL to your image is valid if you're not using the one I provided. EDIT: If the snippet doesn't work for you, you might be using a browser that is either out of date or doesn't support the linear-gradient function.
    – rolznz
    May 17, 2019 at 7:19
7

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%);
2
6

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.stack.imgur.com/bd7VJ.png"/>
</div>

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

5

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

1
  • I noticed this solution can cause problems on iOS. If the moved image is not completely inside the viewport when the page is loaded, then the image will get cut of or not display at all. So this solution should only be used if you don't move the image too far away and guarantee it is inside the viewport when the shadow is visible. Aug 3 at 0:16
4

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

3

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.

3

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>

1
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Apr 28 at 13:58
2

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%);
    }
2

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.

2

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

2
  • perfect ! thanks
    – Dr. Goulu
    Jul 13 at 13:42
  • Works, but applying multiple stacks of drop-shadow seems to decrease the sharpness of the image. Also, I wasn't able to make an image 100% white with this approach. Aug 3 at 0:12
2

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 (for comparision) -->

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

0
  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.
0

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

0

.image-container {
  position: relative;
  display: inline-block;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  height: 100%;
  background-color: blue; /* Change this to the desired color */
  mix-blend-mode: multiply; /* Optional: Blend mode to mix the colors */
}
img {
    width:20%;
    float:left; 
     margin:0;
}
<div class="image-container">
  <img  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" alt="Your Image">
  <div class="overlay"></div>
</div>

0

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:

.masked {
  display: inline-block;
  background-color: red;
  -webkit-mask-size: 95%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}


.masked > img {
  opacity: 0;
  width: auto;
  display:block;
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Firefox_logo%2C_2017.png/581px-Firefox_logo%2C_2017.png?20170928063359" height="100" />
<span class="masked" style="-webkit-mask-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Firefox_logo%2C_2017.png/581px-Firefox_logo%2C_2017.png?20170928063359');"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Firefox_logo%2C_2017.png/581px-Firefox_logo%2C_2017.png?20170928063359" height="100" /></span>
<span class="masked" style="-webkit-mask-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Firefox_logo%2C_2017.png/581px-Firefox_logo%2C_2017.png?20170928063359'); background-color: blue;"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Firefox_logo%2C_2017.png/581px-Firefox_logo%2C_2017.png?20170928063359" height="100" /></span>
<span class="masked" style="-webkit-mask-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Firefox_logo%2C_2017.png/581px-Firefox_logo%2C_2017.png?20170928063359'); background-color: orange;"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Firefox_logo%2C_2017.png/581px-Firefox_logo%2C_2017.png?20170928063359" height="100" /></span>

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.