[csswg-drafts] [filter-effects-2] Allow masking of filters (#13288)

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

== [filter-effects-2] Allow masking of filters ==
Thinking more about #13285 and the gradual application of blurs, another idea hit me. The gradual application of a filter might actually not be restricted to blurs.

So instead of introducing a function specifically for the use case of progressive blurs, I suggest to add a way to apply a mask image to a filter similar to `mask-image`. This gives fine-grained control over how strongly filter effects are applied.

There are different non-exclusive ways how that could be achieved.

# Add a `filter-mask` property

A `filter-mask` property allows to apply a mask to any filters defined via the `filter` property. The syntax would be basically the same as for `mask-image`, i.e.

```ebnf
filter-mask: <mask-reference>#
```

That would probably mean to turn the `filter` property into a shorthand for this new property and the filter effects themselves.

Applying this to the use case outlined in #13285, that would look like this:

```css
.scrim {
  filter: blur(24px);
  filter-mask: linear-gradient(transparent, black);
}
```

Pros:

* Reuse of existing syntax
* Simple to comprehend

Cons:

* Limited to filters applied via the `filter` property (i.e. doesn't work for other filters like `backdrop-filter`)

# Add a `mask()` function to the filter functions

The different filter functions could be extended to take an optional `mask()` function that allows to apply a mask. The syntax for the `blur()` function, for example, would then look like this:

```ebnf
blur() = blur( <length>? <mask()>? )
mask() = mask( <mask-reference># )
```

Applying this to the previous use case, that would look like this:

```css
.scrim {
  filter: blur(24px mask(linear-gradient(transparent, black)));
}
```

Pros:

* Allows to define different masks to each individual effect
* Can be applied everywhere `<filter-value-list>` values are allowed

Cons:

* More complex syntax
* All existing filter functions have to be extended
* Doesn't work for custom filters defined via a `<url>` value

# Add a `mask()` function to the `filter()` function

The `filter()` function of Filter Effects 1 could be extended to take a `mask()` function that works like in the previous proposal.

(That might also make it into the `@image` rule resolved on in #6807.)

Pros:

* Allows to apply masks to filters for `<image>`s

Cons:

* Restricted to `<image>` values

-----

Surely, there are other syntax options. And so far, this proposal concentrates on syntax. Would be great to know how feasible this is and which implementation constraints this has.

Sebastian
Sebastian

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


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

Received on Friday, 2 January 2026 14:48:41 UTC