I noticed the blur only "sees" the underlying pixels directly below the glass surface. Any pixels outside that box, but within the blur radius do not get used in the gaussian filter. Probably the edge pixels are just repeated. You can see this when the light of the moon pops in to view when the edge of the rectangle starts to touch the moon. It would look more real if the light pixels from the moon start to through even when the box itself is still just over the dark area.
Would this be possible to achieve in CSS? I presume having a larger box with the blur, but clipping it to a smaller box or something like that.
This was discussed elsewhere in the comments:
> This can be solved with CSS. Extend the background blur all the way through the element and then use CSS masks to cut out the actual shape you want.
> With this, you can remove the border (or inset box shadow), and the edge of the glass will look much, much more real
I tried this and it works! One unfortunate impact is a loss in simplicity. In the example on the page you can apply the non-JavaScript version to pretty much any element and get a nice glass effect with `border-radius` and such still functioning as expected.
Using `clip-path` I'm able to consider background pixels more correctly but it looks like I'd need an extra div and/or some sizing tricks to get everything working exactly as expected.
I'll keep noodling on this and may add an update to the page if a simple solution comes to mind.
even if you can't figure out a simple solution I'd love to read a part 2 or an addendum with some of these other tricks.
Other folks made similar comments. I’ll have to see if this is possible. Your recommendation at the bottom sounds plausible so I’ll give it a go.