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

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

Searching around just leads back to this blog though [0]. It would be amazing if this was real syntax, but I guess security reasons would probably make it a no-go for general use.

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...

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.

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

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

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.

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

I sincerely hope this is not a real CSS feature.

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

I want to point out as an out-of-touch early 2010s front-end dev that CSS has comically gotten away from me, exemplified by:

vec2 uv = gl_FragCoord.xy / u_resolution.xy;