Re: [csswg-drafts] [filter-effects-2] Progressive blur for `blur()` (#13285)

I like the general idea of this approach for applying progressive blurs. Though I would rather introduce a new function instead of extending the existing `blur()` function.

As it's borrowing the concept of `linear-gradient()`, it could be called `linear-blur()`. (That also allows to introduce radial and conic variants that cover the other use cases outlined in #11134)
And I'd align it more with the [syntax used in `linear-gradient()`](https://drafts.csswg.org/css-images-4/#typedef-linear-gradient-syntax):

```ebnf
<linear-blur()> = linear-blur( [ <linear-blur-syntax> ] )
<linear-blur-syntax> = [ <angle> | <zero> | to <side-or-corner> ]? , <blur-stop-list>
<blur-stop-list> = <linear-blur-stop>#
<linear-blur-stop> = <length>
```

With that, your example would look like this:

```css
.scrim { 
  backdrop-filter: linear-blur(0, 24px); 
}
```

That syntax also has benefits that more than two blur values could be applied and it's extendable to also take offsets as in the gradient syntax, i.e.

```ebnf
<blur-stop-list> = <linear-blur-stop> , [ <linear-blur-hint>? , <linear-blur-stop> ]#?
<linear-blur-stop> = <length> <blur-stop-length>?
<linear-blur-hint> = <length-percentage>
<blur-stop-length> = <length-percentage>{1,2}
```

Sebastian

-- 
GitHub Notification of comment by SebastianZ
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13285#issuecomment-3705096469 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 11:03:55 UTC