Duotone Custom Filter

Say you have a black & white image and want to display it in many different 2-color schemes.


You have a few options here.  You could draw the image in a canvas and then use JavaScript to manipulate each pixel.  Or you could in theory convert your black & white image to SVG and then use CSS to manipulate the colors.  That’s probably a pretty decent solution.

Or you could use the new duotone CSS custom filter I’ve built.  You can find the source for the new filter on Github here.

You do need to be using Chrome with shaders enabled here.  If you don’t already have shaders enabled (they’re off by default), navigate to chrome://flags, search for “Enable Shaders”, click the Enable link, and restart the browser.  Fortunately, if your browser doesn’t support custom filters or you don’t have them enabled, the image will still show up just fine, though it will still be black & white.

The beauty of the duotone custom filter is that the content can really be anything.  It doesn’t have to be an image.  It can be a combination of images, text, whatever.  Unfortunately, video is not supported yet though.

The filter takes two parameters: “black” and “white”.  For each of these parameters you pass in what RGB color you want each to map to.  For example, if I want to map black to blue, and white to yellow, I would use the following CSS:

-webkit-filter: custom(url(duotone.vs) 
                         mix(url(duotone.fs) normal source-atop),
                       1 1 border-box, 
                       black 0 0 255, white 255 255 0);

Putting this into practice...


Click on the black & white color swatches and you should get a color picker popup that will allow you to change the black & white colors individually.

The fun never stops here.

Thief image courtesy of Igor Yanovskiy, from The Noun Project
Tagged , , , , . Bookmark the permalink.

One Response to Duotone Custom Filter

  1. Pingback: Implementing the Duotone Filter with an SVG Filter - Alan Greenblatt

Leave a Reply

Your email address will not be published. Required fields are marked *