# Backdrop-filter (blur) has no effect on .menu-panel, even though background transparency works

**URL:** <https://meta.discourse.org/t/backdrop-filter-blur-has-no-effect-on-menu-panel-even-though-background-transparency-works/413534>\
**Category:** UX\
**Created:** [September 29, 2026, 8:45am UTC](https://meta.discourse.org/t/backdrop-filter-blur-has-no-effect-on-menu-panel-even-though-background-transparency-works/413534 "2026-09-29T08:45:06Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![terraboss](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/terraboss/32/579307_2.png) [@terraboss](https://meta.discourse.org/u/terraboss)\
**Post date:** [September 29, 2026, 8:45am UTC](https://meta.discourse.org/t/backdrop-filter-blur-has-no-effect-on-menu-panel-even-though-background-transparency-works/413534/1 "2026-09-29T08:45:06Z")

</div>

I’m customizing a long-running custom theme and wanted to give the hamburger/sidebar menu (`.menu-panel`) the same translucent, blurred look that already works fine on `.d-header`. Transparency works, but the blur does not — and I’d like to flag this as feedback, since a couple of things about how core styles this component made it harder than expected.

**What I’m trying to achieve**

A semi-transparent menu panel with a `backdrop-filter: blur()` behind it, so the page content is still hinted at through the panel, similar to the frosted-glass look many native apps use. Both the see-through effect _and_ the blur matter to me — transparency without blur just looks messy over busy topic lists.

**What already works**

On `.d-header`, this is all it takes and it works reliably (tested on iOS Safari and desktop Chrome):

```scss
.d-header {
  background-color: color-mix(in srgb, var(--header_background) 50%, transparent);
  -webkit-backdrop-filter: blur(3px) saturate(1.2);
  backdrop-filter: blur(3px) saturate(1.2);
}

```

**What doesn’t work**

The exact same recipe applied to `.menu-panel` gives me the transparency, but never the blur, on iOS Safari:

```scss
.menu-panel {
  background-color: color-mix(in srgb, var(--secondary) 85%, transparent) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  backdrop-filter: blur(6px) saturate(1.2);
  border-radius: 14px;
}

```

Things I tried to make the blur show up, none of which helped:

- Adding `!important` to the `backdrop-filter`/`-webkit-backdrop-filter` declarations themselves.
- Forcing a dedicated compositing layer with `transform: translateZ(0)` combined with `overflow: hidden` (a common Safari workaround for other backdrop-filter issues) — this made no difference here, so I removed it again rather than keep a hack that wasn’t earning its place.
- Confirmed I’m targeting the right element: per `menu-panel.scss`, the opaque background is set directly on `.menu-panel` (not a child like `.panel-body`), which I initially got wrong and then corrected.

If anyone knows why `.menu-panel` behaves differently from `.d-header` here, or has a working recipe, I’d be glad to hear it.

**Second issue: hardcoded backgrounds on individual menu rows**

Even with the panel’s own background made transparent, several things _inside_ it still render solid, because core sets their background directly rather than through the panel’s own background:

- `.user-notifications-list .read` and `.bookmark` — read notifications and bookmarks in the user menu get `background-color: var(--secondary)` directly, so each row shows up as an opaque block floating on the translucent panel.
- `.hamburger-panel .sidebar-footer-wrapper .sidebar-footer-container` — the profile/login footer at the bottom of the sidebar has the same issue.

I can (and did) override these in my theme, but it means hunting down every hardcoded `var(--secondary)` in `menu-panel.scss` one by one, and it’ll break again the next time core adds a new element with the same pattern. It would help a lot if these fell back to a CSS custom property instead, e.g. something like `--d-menu-panel-background` defaulting to `var(--secondary)`, so a theme only needs to redefine one variable to make the whole panel — including its rows — consistently transparent, instead of chasing individual selectors.

Happy to share screenshots of the before/after if useful, and to test any suggested fix on my end.

 ![IMG_1129](https://global.discourse-cdn.com/meta/original/4X/7/8/4/784d99f2e3e7241086c8d2f7795c42b1db6a4710.jpeg)

 ![IMG_1130](https://global.discourse-cdn.com/meta/original/4X/a/e/f/aef08a9eaa691c269118c7631084bdbaa2385c56.jpeg)

---

_[View the full topic](https://meta.discourse.org/t/backdrop-filter-blur-has-no-effect-on-menu-panel-even-though-background-transparency-works/413534)._