How do you make a child element transparent when the parent element is blurred?

Hey folks, how do people make a parent element that is blurred with child element that isn't? An example would be the header for this website where you can see behind the blur in the header's .border div

https://springsummer.dk/

Spring/Summer

Spring/Summer | Copenhagen

Spring/Summer is a digital design agency in Copenhagen. We build strong brands through digital storytelling, engaging content, branded e-commerce experiences and intuitive services & products. We build sites on Shopify, Craft CMS, Wordpress and other platforms.

Jochem•3/14/24, 1:59 PM

they fake it

Jochem•3/14/24, 1:59 PM

the blur is a separate element, as a next sibling of the menu :

Jochem•3/14/24, 1:59 PM

(inspect element is your friend

)

Blue GalagoOP•3/14/24, 2:01 PM

I tried copying the css to see how to do it but the blur seems to cover the content of border

Jochem•3/14/24, 2:08 PM

the main parts of the effect are the backdrop-filter and the positioning on both children of the header element

Jochem•3/14/24, 2:08 PM

the mask image is for a barely noticeable effect around the little border with the border-radius

Jochem•3/14/24, 2:09 PM

foreground is positioned relative (so z-index works) and has a z-index of 1, then blur is positioned absolute with top: 0 to get it to stick to the top, and that really should be it

Jochem•3/14/24, 2:09 PM

if you have a specific problem, it's best to share your code in something like codepen or deployed on github pages so people can see it live in their browsers

Blue GalagoOP•3/14/24, 2:49 PM

https://codepen.io/codermilo/pen/rNbMwXQ Ok I made an example in codepen and it doesn't work here either, is it something to do with image-mask?

CodePencodermilo

rNbMwXQ

...

Jochem•3/14/24, 2:51 PM

yeah, imagemask is the thing that cuts the little border back out

Jochem•3/14/24, 2:52 PM

honestly, I'd recommend just having the blur only be above border. I didn't even notice it went around the edge of the border a tiny bit

Blue GalagoOP•3/14/24, 3:08 PM

Ah fair enough. I'm not sure how to make the image-mask work. Looks like it'd be such a handy trick that you could use in different ways

Blue GalagoOP•3/14/24, 3:09 PM

Thanks anyway!

majkl•3/14/24, 4:51 PM

Off the top of my head, backdrop-filter?

Mmajkl Off the top of my head, backdrop-filter?

Blue GalagoOP•3/15/24, 12:55 PM

Would that be apply one to the border element? I had one on there that went from #000 to transparent but the only effect I saw was the bottom half of the border disappearing but maybe I didn't implement it right?