Frosted glass background for menu drawer

[harshi1]

Ive tried a lot with this and am unable to achieve any type of frosted glass look, I want an effect similar to apple's website which has the menu visible but the background have a frosted glass effect, if possible I also want the background of my menu to have the same effect so it is seamless

https://d1pd1str1ct.com/

that is my website and currently Ive compromised with that look, but please someone help

thank you

[harshi1]

https://d1pd1str1ct.com/ this is the preview link, let me know if you can access it 

[harshi1]

could you perhaps write a css code that I could copy and paste or is that not possible

[PaulNewton]

Hi @harshi1 👋 doing it right takes time, a cheap version is with mask-image like below.

If you need this customization so it looks really good for your specific content and or also have interaction/animations etc then contact me for services.
Contact info in forum signature below ⬇ ⬇ ⬇.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

💣Keep in mind the bad contrast of dark colors on dark color background images, either adjust font colors or add dropshadow to improve contrast across more scenarios.

Add the below in a custom css setting

.menu-drawer__navigation {
  backdrop-filter: blur(16px);
  background: #e4edff9c !important;
}

.header__icon--menu[aria-expanded=true]:before {
  /* lighter bluish white tint */
  background: #e4edff40 !important;
  backdrop-filter: blur(16px);
  mask-image: linear-gradient(to bottom, #ffffffa3 0% 10%, #0000001c 100% 100%);
  opacity: .6;
}

 https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css