Almost CSS only YouTube's Ambient Mode
After looking through some web posts and tutorials, I see the common approach is to have 2 content layers positioned on top of each other: one is the actual content, the other is for the background blur. Even though the background layer can be "down-sampled" (lower-res video/image or by rendering inside a <canvas>), it's still 2 different sets of content layers that need to be kept in sync.
So I thought to myself... Instead of layering the content on top, why don't we just punch a hole through a typical 'backdrop-filter' to see the content underneath? And CSS already has 'mask' that is perfect for the job. Just a single content layer and a blank <div> with some CSS.
So here is my attempt. I'm sure there are reasons why this is not a typical approach (please let me know in the comments!), but I find it to be really versatile, nonetheless.
https://codepen.io/codynhanpham/pen/vENNmVN
And I need to come clean... I did cheat and use just a tiny bit of JS to calculate the positions of the see-through mask. Though if for some reason the target element has a known fixed size, the mask can just be hard-coded in, making this truly a CSS-only solution.
Posted Jul 17, 2025, 8:25 AM UTC