Search code examples
javascriptcsscolors

Invert colors of an image in CSS or JavaScript

How do I invert colors of an image (jpg/png..) in either css if possible or javascript?

Previous related questions don't give enough detail.

Solution

  • CSS3 has a new filter attribute which will only work in webkit browsers supported in webkit browsers and in Firefox. It does not have support in IE or Opera mini:

    img {
   -webkit-filter: invert(1);
   filter: invert(1);
   }
    <img src="http://i.imgur.com/1H91A5Y.png">