34

I want to put a red rectangular <div> element over my webpage so that it would look not only transparent, but also like blended in Photoshop’s Multiply mode.

The <div> would have position: fixed, so the content below it would change quickly.

Is that possible with any HTML5 / CSS3 / canvas / SVG trick?

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
Ernests Karlsons
  • 2,220
  • 5
  • 25
  • 37

10 Answers10

27

I have created a separate, lightweight, open-source library for perform Photoshop-style blend modes from one HTML Canvas context to another: context-blender. Here's the sample usage:

// Might be an 'offscreen' canvas
var over  = someCanvas.getContext('2d');
var under = anotherCanvas.getContext('2d');

over.blendOnto( under, 'screen', {destX:30,destY:15} );

See the README for more information, including the currently-supported blend modes.

You could use this to perform multiply from one canvas to another, but not over standard HTML elements.

Phrogz
  • 296,393
  • 112
  • 651
  • 745
11

No (not natively) but it's coming soon: http://blogs.adobe.com/webplatform/2012/04/04/bringing-blending-to-the-web/

Lea Verou
  • 23,618
  • 9
  • 46
  • 48
  • 3
    +1; their draft spec may be just the thing I needed to get 100% Photoshop-compatible blend modes in the presence of lowered alpha! (And hopefully eventually the library won't be needed at all.) – Phrogz May 30 '12 at 21:35
  • Works in Chrome beta if you enable experimental Web Platform features . http://jsfiddle.net/X4GyF/ – nice ass Apr 04 '14 at 19:16
  • 1
    Just for the record, now in default mode in Chrome, FF and Opera – vals Mar 22 '15 at 22:42
7

You can also look at this demo: http://media.chikuyonok.ru/canvas-blending/ to see how to do this with canvas.

Check the source for blending modes' formulae and how to apply them (formulae are much more readable than in pixastic or context-blender).

Georgii Ivankin
  • 2,702
  • 2
  • 23
  • 35
  • This is an awesome demo man! Have you done it? Can I please use the code for normal blending in my own work? I tried visiting the root to contact the author, but it threw a 404! – Rutwick Gangurde Dec 20 '12 at 06:26
  • No, this is not me, this is by famous Russian front-end man Sergey Chikuyonok (the man behind Zen Coding, btw) :) In the [article](http://chikuyonok.ru/2011/08/optimize-with-canvas/) he calls to feel free with the code in the demo, however you can contact him via [comments](http://chikuyonok.ru/2011/08/optimize-with-canvas/#comments), or see the footer of the page for his email. – Georgii Ivankin Dec 20 '12 at 12:19
  • Thanks mate! I'll mail him! That article has a lot of good stuff for Canvas! :) – Rutwick Gangurde Dec 20 '12 at 19:11
2

This isn't HTML5, but it's as close as I can find for what you're asking.

Javascript blending modes (OpenGL).

I don't think "blend modes" like Photoshop could be emulated with just pure HTML, unless the language took a sharp turn in another direction. But it would be great to see some easier way of doing this.

Kyle
  • 65,599
  • 28
  • 144
  • 152
  • 1
    it shows blending over something that is already there, in the canvas. but, i guess, i cannot apply blending to something that is BELOW canvas, as that would require the canvas to capture window contents, but, at least in firefox, that is not allowed to web applications. – Ernests Karlsons Nov 25 '10 at 16:21
2

I am also very interested in doing that. Many layouts that I coded for visual designers could have used that. Aside from the other posts in this thread, there is a way to do this, currently only in Firefox 4, without using OpenGl or Canvas. It's trough the use of SVG filters. Aparrently it's on nighties from Webkit and Chrome also, but I couldn't see anything working yet.

Here are some demos and explanations:

IMHO something anyware close to blend modes are too much hard to achieve right now. It's very hard to find any references on feConvolveMatrix, feSpecularLighting, or feColorMatrix, and the examples are just impossible to figure out for me. They could work but I don't know how.

I wish something like EffectGames suggested:

div.sprite {
   position: absolute;
   z-index: 2;
   composite: add;
}

This would be a way better approach. Maybe some ninja there skiled in mathematics could make us a lib to do that.

EDIT: There is an easier SVG spec to do exactly blend modes. But no browser that I tested have this working (FF4, IE9, Opera11, Webkit Nightly): http://dev.w3.org/SVG/modules/compositing/master/SVGCompositingPrimer.html - But I also don't know if this will be possible to use in HTML-DOM elements.

Irae Carvalho
  • 777
  • 1
  • 6
  • 19
1

It's landed in Chrome Canary so should reach release soon. http://blogs.adobe.com/webplatform/2013/04/23/all-blend-modes-for-css-fragment-shaders-have-landed/

Ric
  • 3,195
  • 1
  • 33
  • 51
1

You can already use it with just simple CSS (no Canvas). Example:

mix-blend-mode: 'multiply'

Internet Explorer may not support it, but the other browsers do.

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

Antonio Brandao
  • 1,353
  • 13
  • 19
1

This is the closest I have seen, and yes, all assets have to be in the canvas. Note that Internet Explorer starts supporting canvas in version 9 which is not out yet, so if you have to support IE<9 you'll have to use a workaround.

Luis
  • 11
  • 1
  • Yeah the Pixastic library [ http://www.pixastic.com ] does look pretty cool. Thanks for the link. BTW, IE 9 was released in March, so may be an option now. – Simon East Jun 29 '11 at 04:03
0

Depending on the images involved and the exact effect you are after, you might be able to do some creative layering of images and CSS gradients to achieve the desired affect:

http://jonathonhill.net/2012-04-23/blending-css-gradients-like-photoshop/

Jonathon Hill
  • 3,445
  • 1
  • 33
  • 31
0

I have implemented most popular blend modes known from gimp/photoshop using canvas in http://canvasquery.com/ however it is not suitable for relatime.

This will change with introduction of native blend modes in canvas

https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingseparable

rezoner
  • 1,907
  • 13
  • 16