Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question
Interestingly, Internet Explorer has had parts of this since Version 4 - see e.g. the Mask filter – Pekka 웃 Feb 17 '11 at 10:36
Thanks... I'll be sure to test it out to see what it can do. – Michael Feb 17 '11 at 13:06

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 :)

share|improve this answer
This is a great link. It works with canvas though, so it will require JavaScript and be rather resource intensive (so it's more for online image processing that for using it as a design element in everyday pages). Still, +1 – Pekka 웃 Feb 17 '11 at 12:59
I read there that it can be applied to either img or canvas.. If this is true, it shouldn't take much to modify it to apply ti div backgrounds (but maybe it would) :D Thanks :) – Kyle Feb 17 '11 at 13:01
Very cool link... thanks! – Michael Feb 17 '11 at 13:06

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.