Remove Black Color with Shaders

Posted by surprisetalk 12/18/2025

Remove Black Color with Shaders(yuanchuan.dev)

54 points | 19 comments

esperent 12/23/2025|

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

anewhnaccount2 12/23/2025||

Looks like it's an extension offered by this https://css-doodle.com/

esperent 12/23/2025||

Yeah, good catch.

yuanchen.dev is the creator of that, I guess.

scotty79 12/23/2025|||

I eagerly await times when random website's CSS can mine crypto on my GPU.

Etheryte 12/23/2025||

Here's hoping this will never come to browsers because this would become an endless pit of fingerprinting loopholes, similar to canvas and other related APIs.

circuit10 12/23/2025||

I think browsers can already block sites from reading image data from images embedded from other domains so maybe you could use the same logic here

Also WebGL/WebGPU do exist already although I guess that’s easier to disable

woolion 12/23/2025||

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.

maggit 12/23/2025|

It is indeed badly aliased. The technique demonstrated does not take into account antialiasing in the initial render, which causes this issue. There are ways to improve it, but I would advise against this approach in general since it doesn't handle these edge cases well.

ImHereToVote 12/23/2025||

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

ZachSaucier 12/23/2025|

The author creates art using their own custom library that uses CSS-like syntax to render HTML, SVG, and more recently shaders. The point isn't that this is the best way to do it. It's simply a trick that the author used to do something with their own bespoke library that they were trying to do.

nnevatie 12/23/2025||

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

Barathkanna 12/23/2025||

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.

dleeftink 12/23/2025||

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

butlike 12/23/2025||

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;

ZachSaucier 12/26/2025|

That's not CSS, it's GLSL

meindnoch 12/23/2025||

I sincerely hope this is not a real CSS feature.

Zekio 12/23/2025|

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

mcherm 12/23/2025|

No, because the black needs to cover up other shapes (up until the final step of rendering).

Zekio 12/23/2025||

the examples don't really looks like it should be necessary depending on how you go around creating the shapes