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

The `mask-*` properties affect the alpha channel of the rendered element. The masks I imagine for filters also act as a multiplier in the range of `[0, 1]` but affect the "intensitity" of the effect.

And you're right, it's not immediately clear how the mask should affect the filter. It needs to be defined for each filter individually. For consistency, I think it makes sense to always interpolate between 0 and the specified value, not noop and the specified value, e.g. for `contrast(200%)` the value would be interpolated between `0` and the given `200%`. That gives authors control over values below the noop value of `100%`.

Here's a concrete list of how this is meant to affect each defined filter value:

| Filter value | Effect of mask |
|--------|--------|
| `blur()` | Affects the blur radius, interpolating between 0 and the specified value | 
| `brightness()` | Affects the brightness value, interpolating between 0 and the specified value |
| `contrast()` | Affects the contrast value, interpolating between 0 and the specified contrast value |
| `drop-shadow()` | Affects the standard deviation value (the third `<length>` value), interpolating between 0 and the specified value |
| `grayscale()` | Affects the grayscale value, interpolating between 0 and the specified grayscale value |
| `hue-rotate()` | Affects the hue rotation value, interpolating between 0 and the specified value |
| `invert()` | Affects the inversion value, interpolating between 0 and the specified value |
| `opacity()` | Affects the opacity value, interpolating between 0 and the specified value |
| `saturate()` | Affects the saturation value, interpolating between 0 and the specified value |
| `sepia()` | Affects the sepia value, interpolating between 0 and the specified sepia value |
| `<url>` (custom filter) | Either has no effect (fine for a first version) or work with [linked parameters](https://drafts.csswg.org/css-link-params-1/) that define which value(s) to interpolate |

Hope that makes it clear how this should work.

Sebastian

-- 
GitHub Notification of comment by SebastianZ
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13288#issuecomment-3709589719 using your GitHub account


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

Received on Monday, 5 January 2026 09:25:32 UTC