How can I make frosted glass effect on the header?

[Paul222]

I am trying to get my baner to look like this, where the Header is transparent but also blurrs out the background:

I have tried multiple answers that were already posted on here, but I just get it to this point and I can't figure out why my header isn't blurry:

Could someone help me figure out why it doesn't work? I used this css code:

sticky-header{
backdrop-filter: blur(80px);
background-color: rgba(250, 250, 250, 0.20);
}

[mrashid]

@Paul222 url?

[Paul222]

Url: https://ntjdp1-gz.myshopify.com/

[mrashid]

@Paul222 i think already fixed

[Paul222]

On my page it still doesn't look blurry, only transparent 😞

Could you maybe share a screenshot, if it looks any different on your end?

[mrashid]

@Paul222 

[Paul222]

What could be the reason that it doesn't look like that on mine than? 😞

[mrashid]

please check in private window and let me know @Paul222 

[Paul222]

Still looks like this:

[mrashid]

@Paul222 okay let me check

[Paul222]

Thank you very much, did you find anything?

[mrashid]

@Paul222 just to confirm, are you currently using a MacBook

[Paul222]

Correct, yes

[mrashid]

@Paul222 oh let me check on macbook

[mrashid]

@Paul222 not working on macbook

[mrashid]

@Paul222 
please add this line in your backgrounf code didnt remove anything else 

-webkit-backdrop-filter: blur(50px);

[Paul222]

Add it to the header background code or the general background code?

[mrashid]

@Paul222  add in base.css 

#shopify-section-sections--23729334714714__header sticky-header{
-webkit-backdrop-filter: blur(80px);
}

[Paul222]

Still doesn't work ;(

Could you please give me a complete code for the banner to look like this:

Maybe my code has a mistake preventing it from working correctly...

[mrashid]

@Paul222 is it possible for you 
For more direct communication, you can reach out via messaging