[Webkit-unassigned] [Bug 250303] New: The filter() function doesn't work with CSS gradients

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=250303

            Bug ID: 250303
           Summary: The filter() function doesn't work with CSS gradients
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: ana.tudor.lhnh at gmail.com

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))
}
```

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20230108/a2136885/attachment.htm>