Hidding filter: blur; overflow by using backdrop-filter: blur(1px);

Why does using of backdrop-filter: blur(1px) and overflow: hidden makes overflowing filter: blur hidden? This is working only if this three properties are appliend together.

I’ve been trying to search this feature on Google, but found nothing. Can somebody explain me how does it work?
No results in google or MDN CSS reference founded by me on this topic.

No backdrop filter, but overflow hidden and filter blue on circle:
No backdrop filter, but overflow hidden and filter blue on circle

Using of backdrop-filter: blur(1px):
Using of backdrop-filter: blur(1px)

Hello @mddoffguy

i will try to create a sample to check this but if you can do me favor that you share only sample of it on any online service so i be easy to test it

and have a nice day :slight_smile:

1 Like

the only thing i can think of right now that when you use the overflow :hidden that circle is already outside it’s container box and so the overflow hide that part of the circle that outside it’s box that why you could think that it the filter but it actule hide the element as whole

if you provide part of your code for this one maybe we can dive more into it and see if there something else affect it

and have a nice day :slight_smile:

1 Like