The following works:

```
background: filter(url(image.jpg), saturate(0))
```

But using a CSS gradient doesn't:

```
background: filter(linear-gradient(red, tan), saturate(0))
```

Live test: https://codepen.io/thebabydino/pen/RwxowwV

Per spec, the `filter()` function should accept a CSS gradient. It's defined as:

```
filter() = filter( [ <image> | <string> ], <filter-value-list> )
```

And `<image>` [includes CSS gradients](https://www.w3.org/TR/css-images-3/#image-values).

This could simplify things every time we need to add some kind of filter effect to a gradient - for example noise. We can apply an SVG `filter` on the element with the gradient we want to make grainy ([live demo](https://codepen.io/thebabydino/pen/abjpEbz/66e0409358289250d9d742124994e0de)), but applying a filter on an element also affects its text content, so in order to avoid that, we need to use up a pseudo-element, which we absolutely position underneath the element's text content and move the gradient `background` and the `filter` there. Which is totally doable and cross-browser, but it would be easier to only apply the filter on the gradient background.

Right now I have to do this ([live demo](https://codepen.io/thebabydino/pen/VwBPygQ/792799a12a8db65f739295179eca82bf)):

```
div { /* just the relevant CSS */
  position: relative
}

div::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle, red, tan);
  filter: url(#grainy);
  content: '';
}
```

But it could be just this:

```
div { /* just the relevant CSS */
  background: filter(radial-gradient(circle, red, tan), url(#grainy))
}
```