51

Does anybody know of a good way to replicate Photoshop's multiply layer mode using either an image or CSS?

I'm working on a project that has thumbnails that get a color overlay when you hover over them, but the designer used a layer set to multiply and I can't figure out how to produce it on the web.

The best thing I've come up with is either using rgba or a transparent png, but even then it doesn't look right.

10
  • Not too sure what you mean, have you got pictures to help describe? Btw, I know an Andrew Philpott! How crazy!
    – Tim
    Jun 2, 2010 at 14:51
  • 5
    Be sure to tell the designer that browser's aren't photoshop! The best way to avoid this sort of thing is for people designing for the web to have a good understanding of how it works. You imagine if we tried designing for print with <blink> tags?
    – Ben Hull
    Jun 2, 2010 at 17:05
  • doctype.com this is better place for this question. Jun 2, 2010 at 17:07
  • Unfortunately I really didn't get much input with the designer. Also, they designed the thing in InDesign... CMYK. Jun 4, 2010 at 13:21
  • There are some really good methods for image tinting using combinations of css3 and/or javascript here: impressivewebs.com/image-tint-blend-css May 29, 2012 at 9:51

8 Answers 8

23
+350

There are new CSS properties being introduced to do just this thing, they are blend-mode and background-blend-mode.

Currently, you won't be able to use them in any sort of production environment, as they are very very new, and currently only supported by Chrome Canary (experimental web browser) & Webkit Nightly.

These properties are set up to work nearly exactly the same as photoshop's blending modes, and allow for various different modes to be set as values for these properties such as overlay, screen, lighten, color-dodge, and of course multiply.. among others.

blend-mode would allow images (and possibly content? I haven't heard anything to suggest that at this point though.) layered on top of each other to have this blending effect applied.

background-blend-mode would be quite similar, but would be intended for background images (set using background or background-image) rather than actual image elements.


EDIT: The next section is becoming a bit irrelevant as browser support is growing.. Check this chart to see which browsers have support for this: http://caniuse.com/#feat=css-backgroundblendmode


If you've got the latest version of Chrome installed on your computer, you can actually see these styles in use by enabling some flags in your browser (just throw these into your address bar:)

chrome://flags/#enable-experimental-web-platform-features
chrome://flags/#enable-css-shaders

* note that the flags required for this might change at any time

Enable those bad boys and then check out this fiddle: http://jsfiddle.net/cqzJ5/ (If the styles are properly enabled in your browser, the two images should be blended to make the scene look like it is underwater)

While this may not be the most legitimate answer at the current moment due to the almost entirely nonexistent support for this feature, we can hope that modern browsers will adopt these properties in the near future, giving us a really nice and easy solution to this problem.

Some extra reading resources on blending modes and the css properties:

18

Simple with a bit of SVG:

<svg width="200" height="200" viewBox="10 10 280 280">
    <filter id="multiply">
        <feBlend mode="multiply"/>
    </filter>
    <image id="kitten" x="0" y="0" width="300" height="300" xlink:href="http://placekitten.com/300" />
</svg>

and some CSS:

#kitten:hover {
    filter:url(#multiply);
}

The fiddle: http://jsfiddle.net/7uCQQ/381/

1
  • 1
    Any idea what browser support is like for this method? Jan 20, 2014 at 16:34
17

Just for the record, this guy is developing a library to do so. I just came into it while doing a research, haven't tried yet.

https://github.com/Phrogz/context-blender

0
11

It is possible with a 24.png - if you know the trick.

In illustrator you can export the graphic as a 24.png, but this never seems to work like multiply.

I've found away.

  1. get your multiplied graphic on its own
  2. place a solid black 100% box behind it, and select both graphics
  3. in the transparency window select 'Make Mask' and then 'Invert Mask'
  4. export as a 24.png file

works just like a multiply when z-index(ed) on top of a picture.

2
  • +1 Doesn't create the exact effect of a multiply, but gets very close to it! Thanks for this.
    – Larry
    May 14, 2013 at 13:21
  • 2
    Would love to see an example of this on the web somewhere.
    – jhanifen
    Feb 19, 2014 at 22:51
9

No such ability is available. The only compositing options you get that are even close are:

  • lighter compositing mode on an HTML5 <canvas> (which is a+b not a*b, and has about the opposite effect to multiply)

  • min or subtract Compositor filters in IE only.

Neither are really practical.

In general you should not attempt to export Photoshop comps as layers, but render them down to a single opaque image. For rollovers you can make two images (one for normal state, one for hovered) and swap between them using the CSS :hover style to choose a different background image, or—better, as it requires no preloading and reduces HTTP requests—combine both images into one and use background-image/background-position to display the right part of that image in each state as a background image. (“CSS sprites”)

1
  • Yeah, I thought about using sprites but that's not practical because the client is going to be publishing new entries and doesn't have access to Photoshop or anything like that. Jun 4, 2010 at 12:46
5

I recently had the need to do exactly what the OP asked so I searched around. I found a great way to replicate the multiply effect by making a transparent PNG in Photoshop.

  1. Create a new document with the same dimensions of your multiply layer.
  2. Fill the document with black.
  3. Add a vector mask (the icon to the left of layer "fx" at the bottom of the layers window).
  4. Alt/Option + click on the mask itself.
  5. Now copy and paste your multiply layer into the mask.
  6. Cmd/Ctrl + i to invert the layer you just pasted.
  7. Create a new layer below this layer and add the image behind the multiply overlay.
  8. Everything should look pretty close to your desired result. If needed, you can adjust the opacity of the masked layer we created.
  9. When it looks good just toggle the bottom layer's visibility and save the masked layer as a PNG et voila!

All credit goes to Sojeong from https://superuser.com/questions/381704/multiply-blending-mode-to-png

0
3

Check this out: http://www.webdesign.org/photoshop/photoshop-basics/remove-white-using-channels.10545.html

Using those instructions, I had great success watermarking a black-and-white image (ink drawing in my case, with blacks and greys on a solid white background) onto a dark background (wood in my case). There is hardly any difference with the real Multiply filter of Adobe.

I used the Photoshop instructions to remove the whites from my image, leaving only blacks and greys on a transparent background. Saving this to PNG and putting it on the wood in CSS/HTML still lookedmuch worse thanmultiply, but strongly reducing the brightness of the PNG solved it (the light greys stood out before, making it ugly).

In general I recommend you play around in photoshop, replicating the web situation: a semi-transparent (no special stuff) layer on top of a solid background. Tutorials such as the above may allow you to reproduce multiply or other fancy effects.

1
  • Excellent tutorial. Excellent workaround: just adjust the transparency of the image so "multiply layer" is no longer an issue. (And just excellent general PS knowledge.) Thank you so much for posting!
    – JohnK
    Sep 12, 2012 at 16:00
0

Not sure if you will have any luck. As far as I know, it isn't possible even if you tried to integrate some advanced JavaScript with it.

2
  • will probably just need two images with just a rollover state
    – kilrizzy
    Jun 2, 2010 at 15:02
  • Yeah, I didn't find any JavaScript solutions either. I ended up just using a CSS based overlay that's semi-transparent. It's not the exact same look, but it's the closest I can get since using image based rollovers won't really work in this case. Jun 4, 2010 at 13:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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