Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Der Titel des Dokuments</title> <style> body { background-color:#03030a; min-width: 800px; min-height: 400px } img { width:20%; float:left; margin:0; } /*Filter styles*/ .saturate { filter: saturate(3); -webkit-filter: saturate(3); } .grayscale { filter: grayscale(100%); -webkit-filter: grayscale(100%); } .contrast { filter: contrast(160%); -webkit-filter: contrast(160%); } .brightness { filter: brightness(0.25); -webkit-filter:brightness(0.25); } .blur { filter: blur(3px); -webkit-filter: blur(3px); } .invert { filter: invert(100%); -webkit-filter: invert(100%); } .sepia { filter: sepia(100%); -webkit-filter: sepia(100%); } .huerotate { filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); } .opacity { filter: opacity(50%); -webkit-filter: opacity(50%); } </style> </head> <body> <h2>Change PNG image color</h2> <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="original"> <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="saturate" class="saturate"> <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="grayscale" class="grayscale"> <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="contrast" class="contrast"> <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="brightness" class="brightness"> <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="blur" class="blur"> <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="invert" class="invert"> <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="sepia" class="sepia"> <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="huerotate" class="huerotate"> <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="opacity" class="opacity"> </body> </html>