Frosted glass background for menu drawer

Store Design
, , ,

Topic summary

A user is attempting to create a frosted glass effect for their menu drawer, similar to Apple’s website design, but has been unsuccessful in achieving the desired look.

Current Status:

  • The site (d1pd1str1ct.com) currently uses a compromised design
  • User wants the menu background to blend seamlessly with a frosted glass aesthetic

Solution Provided:
A CSS code snippet was shared that implements:

  • backdrop-filter: blur(16px) for the blur effect
  • Semi-transparent background colors
  • mask-image gradient for enhanced visual depth
  • Adjustments for both the menu drawer navigation and header icon

Implementation:

  • Code should be added to custom CSS settings
  • A warning was included about maintaining proper contrast between dark text and dark backgrounds
  • Suggestion to adjust font colors or add drop shadows for better readability

The responder noted that a more polished, customized solution with animations would require professional services, but offered this quick CSS implementation as a starting point.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

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

2

Hi @harshi1 :waving_hand: 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 :down_arrow: :down_arrow: :down_arrow:.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

:bomb: 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

3

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

1 Like
4

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