TBH, I'm getting a little bored with Perfect Todos. It's that point where I'm like 50% done, and it's the hard stuff left. So things have slowed down a bit.
But, I am working on the foundations for a new todo entry. Part of that means glass. I started with Josh W. Comeau's excellent post on next-level frosted glass. Normally, backdrop blur will only blur what is directly behind it. But to make a convincing glass effect, it needs to blur things that are close to it too. You trick it by making the blur area larger and clipping it. Since I'm planning on using this in dropdowns and other floating elements, I adapted it a bit so that it will pick up objects in all directions. Also used the rounding trick an SVG and mask-image.
Then, I wrapped it up in a web component:
It's a simple web component. Just some HTML and styles. But it does use the shadow DOM so you can slot in the content you want to be on top of the glass. It comes with a shadow, but that can be customized with --shadow. I think it works pretty well. But I'm biased.