CSS backdrop-filter (i.e. frosted glass) like effect

vvvv gamma question
1

Quick intro on backdrop-filter: Video

CSS backdrop-filter lets you create a blur that looks like it isn’t applied on the elements themselves, but rather on top of the elements. This gives an appearance of a frosted glass.

Here’s the CSS code in action showing you before and after: Codepen link.

I’m not able to reproduce this effect.

I have some Skia references, here and here, but I’m unable to replicate it easily.

I’m facing two problems:

  • To create a frosted glass, I need a white rectangle of a very low opacity (0.01) with a blur applied. The problem is it doesn’t appear like what I see with backdrop-filter in the CSS code. This makes sense because a normal blur blurs the element itself while a backdrop-filter blurs elements behind it. But I’m not able to understand how I would replicate this effect.
  • Another problem is that while I discovered I could use Precompose node to blur the content, but I get a Layer back. I don’t know how would I take this layer and put it onto frosted glass rectangle.
    • PictureRecorder node exists but it doesn’t seem to work
      • Update: A Picture means something else in Skia. To display the picture back again from PictureRecorder, one needs to use ReplayPicture node. More info: 1, 2, 3, 4, 5, 6
    • I don’t want to use OffscreenCanvas as it’ll mess up the dimensions

5-clip-path.vl (26.3 KB)

Any help is appreciated.

2

Hi ajitid,

not sure exactly what you are trying to archive, but have you checked ClipRect and ClipPath nodes?

Check the BlurredOverlay and Use ImageFilters from the Helpbrowser.

image
image436×603 28.7 KB

Best,
Anton

1 Like
3

Oh, thanks for telling me that! I have updated my patch to match the Codepen link. Here’s the updated patch:

5-clip-path.vl (50.6 KB)

Now you could see that I’m trying to match it the way blur appears in Codepen.

You’d notice is the blur produced by vvvv patch is not as diffused as what is produced by Codepen’s code. This is the what I need help with.

4

I think my patch outputs pretty close to the desired now!

image
image1467×1113 71.8 KB

I was missing a Blend Mode with value Src on the blur. In the absence of Blend Mode, increasing the blur made the blur fade away.

Here’s the patch with all the changes:

5-clip-path.vl (55.2 KB)

1 Like