Re: box-shadow blending and compositing

On Feb 17, 2015, at 2:35 PM, Jakub Fiala <<>> wrote:

Hi everyone,

just wondering – are there any plans to include box shadow compositing properties in the upcoming CSS specs? What I mean is being able to have a shadow that isn’t visible on its own, but causes a gradual ‘fade’ effect on the content below, something that I might be able to do with globalCompositeOperation=‘destination-out’ on a Canvas. I found an Adobe doc suggesting a box-shadow-blending property, but not many people seem to be talking about it elsewhere. I think it could be extremely useful, especially in these trendy ‘looped <video> as background’ designs.

If it doesn’t need to be box-shadow and drop-shadow effects are good enough, then SVG Filters can do the trick. It requires access to the “BackgroundImage” (the backdrop) which many browsers do not provide yet. You should be able to test it with IE in SVG.

Having blend effects between box and text shadows and with the entire backdrop would be great though. As for mix-blend-mode, you would probably see situations where the shadows are isolated from the backdrop. (Like for animated transformations on your element.)


Thanks a lot,

jakub fiala

Received on Wednesday, 18 February 2015 04:33:50 UTC