Background-blend-mode allows blending between css background images, gradients, and colors.

Browser Support

This feature is already supported by a few major browsers including Chrome, Firefox and Opera.

Code Example

You can use background-blend-mode like this:

body { background-color: green; }
div { 
  width: 200px;
  height: 200px;
  background-size: 200px 200px;
  background-repeat:no-repeat;
  background-image: linear-gradient(to right, #000000 0%,#ffffff 100%), url('ducky.png');
  background-blend-mode: difference, normal;
}

More Information

More information can be found here.