Blur

June 2023

It’s always bothered me that filter: blur() bleeds light at the edges. I started looking into a fix after Artur tweeted about it, here are some experiments. The SVG filter works well, but it introduces banding in the image.

Image with `filter: blur()` bleeds light at the edges

Pseudo element with `backdrop-filter: blur()` (breaks border-radius)

SVG `filter` with `feGaussianBlur` + `feComponentTransfer` + `feFuncA`

What about animation? I’m predicting a trend that uses blur more commonly for entrance and exit animations. SMIL animations work great for the SVG filter, but backdrop-filter has some issues on Chrome.

Chrome has issues animating `backdrop-filter`.

Using `<animate />` on the `stdDeviation` attribute.