Install using Bower

bower install jquery-duotone

or get your copy of the jquery-duotone plugin.

Download Fork

Include the following resource on your page before initializing:

<script src="jquery.duotone.js"></script>


Options are set by passing a valid options object at initialization or to the public "defaults" method. You can also set the gradient map option for a specific instance by attaching a data-gradient-map attribute containing a properly formatted CSS linear gradients.

Name Description Type Default
gradientMap Same format as CSS linear gradients without the initial angle, sides or corners. Instead you provide simply a list of comma-separated color-stops. string 'black, white'


Methods are publicly available to all active instances, unless otherwise stated.


Sets default plugin options

$("img").duotone("defaults", opts);
Name Description Type Default
opts Options object object {}


Resets instance back to original image



Process the image to a duotone image



Pass your gradient map as an option of the plugin:

<img src="your-image.jpg">
  $(document).ready(function() {
      gradientMap: '#0000FF, #FFFFFF'

Or use the data-gradient-map attribute:

<img src="your-image.jpg" data-gradient-map="#0000FF, #FFFFFF">
  $(document).ready(function() {

Hover each exemples to reveal the original images.


Here is a basic usage exemple including the API.

<img src="your-image.jpg" data-gradient-map="#0433ff, #ffe4e1">
  $(document).ready(function() {

    $('#reset').on('click', function(e) {

    $('#process').on('click', function(e) {

    $('#update').on('click', function(e) {
      start = $('input[name="start"]').val();
      end = $('input[name="end"]').val();
      gradient = start + ', ' + end;
      $('img').duotone('defaults', {
        gradientMap: gradient

stop position

Add some color stop positions for a better control of your gradient map.

<img src="your-image.jpg" data-gradient-map="#271f37 25%, #dc143c">

hex but also color name, rgb or hsl

As you can use the same format as CSS linear gradients, you can also use each CSS color definitions.

<img src="your-image.jpg" data-gradient-map="darkblue, rgb(105, 105, 105) 60%, hsl(55, 91%, 69%) 90%">


The plugin works in each browsers that support canvas.


All pictures came from the amazing and talented Long Cao.

CSS Color Parser by Dean McNamee.