Change color of PNG image via CSS?
You can use filters with -webkit-filter
and filter
:
Filters are relatively new to browsers but supported in over 90% of browsers according to the following CanIUse table: https://caniuse.com/#feat=css-filters
You can change an image to grayscale, sepia and lot more (look at the example).
So you can now change the color of a PNG file with filters.
body {
background-color:#03030a;
min-width: 800px;
min-height: 400px
}
img {
width:20%;
float:left;
margin:0;
}
/*Filter styles*/
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }
<!--- img src http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg -->
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="original">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="saturate" class="saturate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="contrast" class="contrast">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="brightness" class="brightness">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="blur" class="blur">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="invert" class="invert">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="sepia" class="sepia">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="opacity" class="rss opacity">
CSS - Add Color to Black & White PNG Image Using a Filter
You can do it with CSS filters, though I wouldn’t recommend that at all:
.colorizable { filter: /* for demonstration purposes; originals not entirely black */ contrast(1000%) /* black to white */ invert(100%) /* white to off-white */ sepia(100%) /* off-white to yellow */ saturate(10000%) /* do whatever you want with yellow */ hue-rotate(90deg);}
.example-clip { display: block; height: 20px; margin: 1em; object-fit: none; object-position: 0 0; width: 300px;}
.original { filter: contrast(1000%);}
body { background: #333;}
<img class="colorizable example-clip" src="https://cdn.sstatic.net/Sites/stackoverflow/img/wmd-buttons.svg" /><img class="original example-clip" src="https://cdn.sstatic.net/Sites/stackoverflow/img/wmd-buttons.svg" />
CSS filter: make color image with transparency white
You can use
filter: brightness(0) invert(1);
html { background: red;}p { float: left; max-width: 50%; text-align: center;}img { display: block; max-width: 100%;}.filter { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
<p> Original: <img src="http://i.stack.imgur.com/jO8jP.gif" /></p><p> Filter: <img src="http://i.stack.imgur.com/jO8jP.gif" class="filter" /></p>
Is there any way to colorize a white PNG image with CSS only?
This can be done with css masking, though unfortunately browser support is really bad (I believe webkit only).
http://jsfiddle.net/uw1mu81k/1/
-webkit-mask-box-image: url(http://yourimagehere);
Because your image is all white, it is a perfect candidate for masking. The way the mask works is that wherever the image is white, the original element is shown as normal, where black (or transparent) the original element is not shown. Anything in the middle has some level of transparency.
EDIT:
You can also get this to work in FireFox with slight help from svg
.
http://jsfiddle.net/uw1mu81k/4/
div { width: 50px; height: 50px; mask: url(#mymask); -webkit-mask-box-image: url(http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png);}
<div style="background-color: red;"></div><div style="background-color: blue;"></div><div style="background-color: green;"></div><div style="background-color: orange;"></div><div style="background-color: purple;"></div>
<svg height="0" width="0"> <mask id="mymask"> <image id="img" xlink:href="http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png" x="0" y="0" height="50px" width="50px" /> </mask></svg>
How to replace color of PNG image using CSS?
Your icon is a png
image, so each pixel is defined separately to have its own color. There are no whole shapes that you can target with css and define a color, as you would for regular HTML elements.
However, there I a few things I would say:
I would have thought that it should be possible to change the color of this shape in photoshop without making it look any more grainy or pixelated than before.
I would suggest making this into an
svg
. This is a vector file format, so it generally has a smaller file size compared to pixel images, has completely sharp and defined edges, and can be scaled up to any size without reducing its quality. And, most importantly for you, it's very easy to change its color with CSS.You could try using CSS filters to change the appearance of your
png
. Check out this stackoverflow question to see if it helps: Change color of PNG image via CSS?
As I've said, an svg
would be my recommended option. I've created a code snippet below of what that would look like – you'll find your color #2a4f6c
in the code, so just change that if you want the image to have a different color again..
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1360.6 1077.2" style="enable-background:new 0 0 1360.6 1077.2;" xml:space="preserve"><style type="text/css"> .st0{fill:#2a4f6c;}</style><path class="st0" d="M356.4,460l260.4-109.3l-21.8-51.8L334.6,408.1c-13,5.5-19.2,20.5-13.7,33.5l1.9,4.6 C328.3,459.3,343.3,465.5,356.4,460z"/><rect x="614.5" y="239" transform="matrix(0.9059 -0.4236 0.4236 0.9059 -61.7804 311.7127)" class="st0" width="111.8" height="111.8"/><path class="st0" d="M706.2,197.3l-131.4,61.4c-3.7,1.7-8.1,0.1-9.9-3.6l-14.1-30.2c-1.7-3.7-0.1-8.1,3.6-9.9l131.4-61.4 c3.7-1.7,8.1-0.1,9.9,3.6l14.1,30.2C711.5,191.1,709.9,195.5,706.2,197.3z"/><path class="st0" d="M786.4,375.5L655,436.9c-3.7,1.7-8.1,0.1-9.9-3.6L631,403.1c-1.7-3.7-0.1-8.1,3.6-9.9L766,331.8 c3.7-1.7,8.1-0.1,9.9,3.6l14.1,30.2C791.7,369.3,790.1,373.8,786.4,375.5z"/><path class="st0" d="M907.2,521.7c1-2,1.5-4.2,1.5-6.5v-18.7c0-8.2-6.6-14.8-14.8-14.8H547.4c-8.2,0-14.8,6.6-14.8,14.8v18.7 c0,2.3,0.6,4.5,1.5,6.5H907.2z"/><path class="st0" d="M941.8,589.8H499.5c-13.3,0-24.1-10.8-24.1-24.1v0c0-13.3,10.8-24.1,24.1-24.1h442.3 c13.3,0,24.1,10.8,24.1,24.1v0C966,579,955.1,589.8,941.8,589.8z"/></svg>
Apply a filter with CSS to change colors of a picture
you can use filter hue-rotate(*x*deg)
to change the colors, here I have attached code.
body { align-items: center; display: flex; font-family: Helvetica, sans-serif; height: 100vh; justify-content: center; margin: 0;}body div { font-size: 15px; margin-top: 15px; text-align: center;}
form#smileys input[type="radio"] { -webkit-appearance: none; width: 90px; height: 90px; border: none; cursor: pointer; transition: border .2s ease; -webkit-filter: grayscale(100%); filter: grayscale(100%); margin: 0 5px; transition: all .2s ease;}form#smileys input[type="radio"]:focus { outline: 0;}form#smileys input[type="radio"].happy:hover,form#smileys input[type="radio"].happy:checked{ -webkit-filter: hue-rotate(300deg); filter: hue-rotate(300deg);}form#smileys input[type="radio"].happy { background: url("https://res.cloudinary.com/turdlife/image/upload/v1492864443/happy_ampvnc.svg") center; background-size: cover;}form#smileys input[type="radio"].neutral:hover,form#smileys input[type="radio"].neutral:checked{ -webkit-filter: hue-rotate(10deg); filter: hue-rotate(10deg);}form#smileys input[type="radio"].neutral { background: url("https://res.cloudinary.com/turdlife/image/upload/v1492864443/neutral_t3q8hz.svg") center; background-size: cover;}form#smileys input[type="radio"].sad:hover,form#smileys input[type="radio"].sad:checked{ -webkit-filter: hue-rotate(160deg); filter: hue-rotate(160deg);}form#smileys input[type="radio"].sad { background: url("https://res.cloudinary.com/turdlife/image/upload/v1492864443/sad_bj1tuj.svg") center; background-size: cover;}
.mtt { position: fixed; bottom: 10px; right: 20px; color: #999; text-decoration: none;}.mtt span { color: #e74c3c;}.mtt:hover { color: #666;}.mtt:hover span { color: #c0392b;}
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title></head><body> <form id="smileys"> <input type="radio" name="smiley" value="sad" class="sad"> <input type="radio" name="smiley" value="neutral" class="neutral"> <input type="radio" name="smiley" value="happy" class="happy" checked="checked"> <div>It looks like you're feeling <span id="result">happy</span> today..</div></form>
<a class="mtt" href="https://morningtrain.dk" target="_blank"> With <span>♥</span> from Morning Train</a></body></html>
How to make a color white using filter property in CSS
You can combine filter properties like this.
brightness(0) invert(1);
body {
background-color: #dadada;
}
.custom-1 {
filter: invert(0.5);
}
.custom-2 {
filter: brightness(0) invert(1);
}
<img src="https://s.cdpn.io/3/kiwi.svg" class="standard" width="50" height="50" alt="img">
<img src="https://s.cdpn.io/3/kiwi.svg" class="custom-1" width="50" height="50" alt="img">
<img src="https://s.cdpn.io/3/kiwi.svg" class="custom-2" width="50" height="50" alt="img">
Having Issue on Inverting Black to White PNG
I believe your issue is arising from using an image that is grey, rather than black. When this grey image is inverted, it just looks like a lighter color of grey.
Your code works fine, you just need to use a darker image to get the desired effect. Try swapping your image with this:
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Yin_yang.svg/2000px-Yin_yang.svg.png" width="100px" height="100px">
Working fiddle with different image:
https://jsfiddle.net/9f2cd2df/1/
Related Topics
Block Elements Only Inside Flex Item
How to Style The Backface of a Rotated Element
Text in Outlook Doesn't Use Line-Height
CSS <Img> Relative Positioning VS. Background-Image + Background-Position
Text Wrapping Incorrectly for Radio Button
How to Iterate Keyframe Percentages Less CSS
Javafx: Styling Application with CSS Selectors
CSS Form Checkbox Styling with Checked and After Tags
Cache Busting Images Which Are Linked Inside SASS Files
Create a User-Defined Gap Between Two Bootstrap Columns
CSS3 Transform Property Working Differently in Internet Explorer
Definition List with Inline Pairs
How to Make The New Facebook Post Embed Feature Responsive
Place Custom Checkbox Icon to Right of Label Bootstrap 4