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.
10 Replies
they fake it
the blur is a separate element, as a next sibling of the menu
.foreground:
(inspect element is your friend 🙂)
I tried copying the css to see how to do it but the blur seems to cover the content of border 😩
the main parts of the effect are the backdrop-filter and the positioning on both children of the header element
the mask image is for a barely noticeable effect around the little border with the border-radius
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
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
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?
yeah, imagemask is the thing that cuts the little border back out
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
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
Thanks anyway!
Off the top of my head, backdrop-filter?
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?