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.
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.
I thought this was some crazy CSS syntax I've never seen before:
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...
Looks like it's an extension offered by this https://css-doodle.com/
Yeah, good catch.
yuanchen.dev is the creator of that, I guess.
wouldn't the simplest solution, just be to use transparent instead of black? or in this case #0000 instead of #000
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!).