How to create a frosted glass effect on Dawn 1.0 theme header?

Store Design

Topic summary

Goal: Add a frosted glass (blur-behind) effect to the Dawn 1.0 theme header so content beneath appears blurred, similar to apple.com.

Attempts and feedback:

  • Initial CSS added to base.css (using backdrop-filter: blur(8px) plus fixed positioning and opacity) did not produce the effect.
  • A CodePen demo was suggested, but the OP noted it swaps in a pre-blurred image and isn’t suitable for a live blur of underlying content.

Proposed solution:

  • Add CSS targeting the header containers (sticky-header.header-wrapper and .color-background-1.gradient.header-wrapper–border-bottom) with backdrop-filter: blur(48px) and a semi-transparent white background (rgba(255,255,255,.15)). A screenshot was shared to illustrate the result.

Notes:

  • backdrop-filter is a CSS property that applies effects (e.g., blur) to what’s behind an element; pairing it with a translucent background helps the effect render visibly.

Open items:

  • How to apply the same blur effect to the mobile menu/drawer remains unanswered.
  • The OP did not explicitly confirm the final fix, though another participant suggested the OP had it working. The discussion appears partially resolved.
Summarized with AI on December 18. AI used: gpt-5.
1

Hello, I’m trying to make my header not only have its current translucent opacity, but also have it blur content behind it, similar to apple.com.

I’ve played with the base.css file ad added the below code, but it doesn’t have an effect.

sticky-header.header-wrapper, .color-background-1.gradient.header-wrapper–border-bottom {
position: fixed !important;
top: 0px !important;
left: 0px !important;
width: 100% !important;
opacity: 0.8 !important;
backdrop-filter: blur(8px) !important;
}

My site is www.markpomerantz.com. Thank you!

1 Like
2

@JW1000

yes, please try this code

https://codepen.io/ariona/pen/xxdOaM

3

Thank you. Not quite sure how/where to apply this CSS to just my Nav on my site. How would I do that?

4

Looking further at this code, I don’t think this is the right solution for my Nav — it looks like this is importing both a normal image, as well as a blurred version of the same image, and then saying that anytime the box is over the image, to show the blurred one instead.

I just need the CSS that will make anything that’s underneath my Nav show as blurred.

5

Hi LW1000,

i have the same issue. I have seen that you’ve figured it out.

Could you please help me with blurring my header?

Thanks

6

@JW1000 add below css into base.css file

sticky-header.header-wrapper, .color-background-1.gradient.header-wrapper--border-bottom {
    backdrop-filter: blur(48px) !important;
    background-color: rgba(255, 255, 255, .15)!important;
}

Ujjaval_0-1681209575961.png
Ujjaval_0-1681209575961.png1581×791 84 KB

2 Likes
7

any clue how we do this for a mobile menu/the drawer that opens up?