I thought this was some crazy CSS syntax I've never seen before:

    background: @shaders(
      fragment { }
      vertex { }
      texture { }
    );

Indeed, there was an old CSS Shaders feature (in Chrome, behind a flag) behind from way back around 2013 [1]. Unclear if there's been any development since.

[0] https://yuanchuan.dev/add-shaders

[1] https://developer.chrome.com/blog/introduction-to-custom-fil...

We have come a full circle with a re-invention of luma keying, originally from the 1950s, or so.

It seems the shader transparent version is badly aliased? The effect is less noticeable on Chrome than Firefox, but it is still quite visible. This defeats the purpose of vector graphics...

It's a nice trick to play around, but that limits its usefulness.

I sincerely hope this is not a real CSS feature.

Why not svg filters to create alpha channels? Seems to be supported by the library too (very useful btw!).

Nice explanation. This is one of those shader tricks that feels obvious once you see it, but saves a ton of asset wrangling in practice. Treating black as a blend signal at render time instead of baking alpha channels is a clean solution, especially for effects, legacy textures, or quick prototyping.

If you are gonna use shaders. Why not create the whole boxes as meshes? Why bother with the CSS at all?

wouldn't the simplest solution, just be to use transparent instead of black? or in this case #0000 instead of #000