[csswg-drafts] [filter-effects-2] Property for binary "carveout" of filters at element granularity? (#13770)

Artoria2e5 has just created a new issue for https://github.com/w3c/csswg-drafts:

== [filter-effects-2] Property for binary "carveout" of filters at element granularity? ==
Sometimes we want to apply a filter to an *entire* webpage except for certain parts. A classic example is the `invert(1) hue-rotate(180deg)` "cheap dark mode", where it is very much inappropriate to also invert images. The typical solution is to do a double application of this filter, but that causes color shifts due to clipping of the intermediate value.

Hence the idea: just somehow exclude them from the filter altogether.
Building on the property of #13288 and making up a new css-value 
```
<sel()> = sel( <string> )
<mask-reference> |= <sel()>
```
with the additional constraint that the `<string>` within must resolve to a value that conforms to the `<selector-list>` construct, one could say:
```css
html {
  filter: invert(1) hue-rotate(180deg);
  filter-mask: sel(":not(img)");
}
```
to request that everything *except* for `img` elements to be subjected to the filter.

### Why `filter-mask`?

Conceptually this proposal can be thought as asking the browser to dynamically apply a mask that is only opaque when the parts that match the selector(s) specified in `sel()` is in the foreground at the screen-position.

I have not given any thought about performance.

"in the foreground" is only there to pretend that I have thought about overlapping boxes. I shriek at the thought of translucent covering-elements.

### Is this good for anything else?

I'd say it makes many silly "hole-punching" things possible without requiring extensive changes to the underlying document. The "cheap dark mode" is probably the most useful, but I imagine that some vaguely artistic things can be done with blur, brightness, and contrast too.

I am kinda regretting writing this thing, but at the same time I *really* want some kind of hole-punching, so be it.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13770 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 6 April 2026 13:52:30 UTC