Is there a way to mimic photoshop's overlay filter with CSS?

Question

The overlay blend alters the color of the image on top, as opposed to just altering the transparency. Is there a way to mimic this with CSS? Just exporting a photoshop image with the layer set to overlay and placing it over a background on the web page doesn't work.

Answer 1

It can't be done with pure css, but it can be done with javascript. Check out Pixastic's blend function, it has ~20 blending methods that match those in photoshop.

Note: this answer has become less accurate over the years. The mix-blend-mode attribute now works across most browsers, and pixastic seems to have disappeared.

Answer 2

I'm late to the party, but there is now a mix-blend-mode css property that applies blend mode to an entire element which takes into account the elements below.

Answer 3

now you can do it with CSS but only in modern browser, try background-blend-mode: multiply; it blend the background-image of an element with its background-color.