Any idea when blending modes might be implemented in browsers?

I think it would be great for div’s/img’s to get some of the functionality that “layers” have in photoshop.

Right now, using .png’s, div’s/img’s/etc.’s have their RGB and alpha values. If you have a 50% transparent layer on top of an 100% opaque layer, the resulting color is a 50/50 blend. Similarly, if you have a 100% opaque layer on top of another 100% layer, the top layer is the only one that shows.

In photoshop, however, you have blending modes — multiply, color dodge, screen, overlay, soft light, et al. — all of which blend the layers using methods different from the method described above.

I made a web site that has a spotlight on the page, but I won’t be able to light up the dynamic content that it’s pointing at (unless I use JS to do so) because the only blending mode available to me is the “normal” RGB*A method. There is no option to blend a gobo (picture of the light) using a color dodge, overlay, or soft light method.

Is this a feature that will be coming out soon to any web browsers?


So far I don’t think browsers intend to implement this as a standard browser behaviour, although it’d be great to see it as a CSS attribute for the background!

But you can use a very popular library to achieve the effect you’re after.

The Photoshop Blend modes library from Pixastic.

Either you can use it “as is” or probably can modify it to suit your needs better 🙂

Hope it helps some 🙂

Source : Link , Question Author : Michael , Answer Author : Kyle

Leave a Comment