> Almost universally, contemporary browsers support the same compositing tools we’ve used in graphic design and photo editing software for years.<p>I (subjectively) don’t think this is <i>quite</i> a fair thing to claim: some still don’t, and those that do can be <i>very</i> buggy, sometimes unusably so.<p>For starters, IE and Edge don’t support it. The article, incidentally, notes this for Edge, then suggesting using `@supports not (background-blend-mode: normal)`. I would suggest considering (whether you decide to do it or not) using progressive enhancement rather than graceful degradation, putting any necessary fallback in place by default, and adding the blending functionality in `@supports (background-blend-mode: normal)` instead: this will make it work for IE, which doesn’t support @supports. Plenty of people still use IE, and it’s generally desirable to structure things to support it where there is no particular cost to doing so. (I’m <i>not</i> suggesting pandering to IE; for my own stuff now, I make sure the content will still be accessible, but care naught about the accuracy of its formatting.)<p>Next, blending is one of the buggier areas of browsers, an area where it’s common to encounter serious bugs (because GPUs are awful, mostly). For instance, for my website redesign a few months ago (<a href="https://chrismorgan.info/blog/2019-website/" rel="nofollow">https://chrismorgan.info/blog/2019-website/</a>) I designed it in Firefox using blending on my left sidebar and experienced no trouble; but when I checked it in Chrome, I was forced to gave up after a while because I kept running into <i>severe</i> bugs there. I think there were three major bugs that I came across; one I don’t recall, but the other two I do:<p>• <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=711955" rel="nofollow">https://bugs.chromium.org/p/chromium/issues/detail?id=711955</a>: two and a half years ago, mix-blend-mode on the body regressed, breaking the very first example in the relevant spec. Quite a few people have complained, and the bug has clear and simple reproduction steps; but no action has been taken.<p>• <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=992398" rel="nofollow">https://bugs.chromium.org/p/chromium/issues/detail?id=992398</a>: if you try to blend a large element (like some of my blog posts, when trying to blend essentially the entire page), it stops rendering after 8,192px (or probably 16,384 device pixels, but I haven’t confirmed that), so that half the page is just <i>missing</i>! I failed to devise a workaround. (Others have then claimed performance problems on such large surfaces, and I think it was measurably harming memory usage too, but I didn’t measure it particularly carefully at the time.)<p>So I ended up with a genuinely crippling bug in rendering so that I <i>couldn’t</i> use it the way I wanted to in at least Chrome on Windows, and a total lack of confidence in browser blending.