Right, this is a little more complicated… when an element like the header gets a backdrop-filter it becomes the root for the effect. So any descendant element nested within that root (like the dropdown panels) can only blur what’s inside that root… it can’t see the page content beyond the header even though the panels extend beyond the header, so you don’t get any blur there.
What you can do instead is use a pseudo element on the header to avoid this root restriction.
.d-header {
position: relative;
isolation: isolate;
background-color: transparent;
&::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: color-mix(in srgb, var(--header_background) 70%, transparent);
backdrop-filter: blur(12px);
pointer-events: none;
}
}
.menu-panel {
background-color: color-mix(in srgb, var(--secondary) 70%, transparent);
backdrop-filter: blur(12px);
}
.user-menu .quick-access-panel .read {
background: transparent;
}