# Backdrop Blur in Dropdown Content? **URL:** \ **Category:** Elements\ **Created:** [October 16, 2025, 3:40pm UTC](https://forums.realmacsoftware.com/t/backdrop-blur-in-dropdown-content/51783 "2025-10-16T15:40:59Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [October 16, 2025, 3:40pm UTC](https://forums.realmacsoftware.com/t/backdrop-blur-in-dropdown-content/51783/1 "2025-10-16T15:40:59Z")
Has me beat! At least a couple hours on this with no joy. The applications nav item is a dropdown component. In the dropdown component I have just a flex and 2 buttons inside. Nothing I can do applies background blur to the dropdown content area. You can see it here with semi opaque background and 30px blur, exact same as the nav its self, but it just won’t have it and as seen in image no blur is applied to dropdown. I’ve tried isolating it but still no. Tried a multitude of css in web inspector, but no. I think it’s related to the transform being automatically applied, lifting it out of the stacking order, so it sees nothing to blur behind??? ![CleanShot 2025-10-16 at 4 .31.13@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/5/5/55d09dda13ae771bd958d7466b6a9df7c9255f95.jpeg) ---
**Author:** ![AndyG](https://avatars.discourse-cdn.com/v4/letter/a/5f8ce5/32.png) [@AndyG](https://forums.realmacsoftware.com/u/AndyG)\ **Post date:** [October 16, 2025, 3:48pm UTC](https://forums.realmacsoftware.com/t/backdrop-blur-in-dropdown-content/51783/2 "2025-10-16T15:48:00Z")
See [Blur bug found on Web preview](https://forums.realmacsoftware.com/t/blur-bug-found-on-web-preview/51566) I assume you are seeing this in Safari pre-v26? If so, you need to turn on the CSS Unprefixed Backdrop Filter feature. Should work fine in Chrome, Firefox and Safari v26. ---
**Author:** ![AndyG](https://avatars.discourse-cdn.com/v4/letter/a/5f8ce5/32.png) [@AndyG](https://forums.realmacsoftware.com/u/AndyG)\ **Post date:** [October 16, 2025, 3:50pm UTC](https://forums.realmacsoftware.com/t/backdrop-blur-in-dropdown-content/51783/3 "2025-10-16T15:50:11Z")
Ah, now I read your post again it might not be that straightforward!… Turn off the opaqueness and see what happens with just blur. ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [October 16, 2025, 3:53pm UTC](https://forums.realmacsoftware.com/t/backdrop-blur-in-dropdown-content/51783/4 "2025-10-16T15:53:30Z")
Same in all browsers, tried everything I can think of. Here’s a really simplified version of the project file if anyone fancies a challenge. [elementsapp://downloadDocument/vIjrzcL2HKvm](elementsapp://downloadDocument/vIjrzcL2HKvm) ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [October 16, 2025, 4:02pm UTC](https://forums.realmacsoftware.com/t/backdrop-blur-in-dropdown-content/51783/5 "2025-10-16T16:02:55Z")
Really seems like stacking issue, as filter blur work fine on it, just backdrop blur that does not. I don’t believe it’s seeing anything behind its self to blur. ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [October 16, 2025, 5:06pm UTC](https://forums.realmacsoftware.com/t/backdrop-blur-in-dropdown-content/51783/6 "2025-10-16T17:06:14Z")
only played 5 mins need to check some more , the same happens just using blur in the container added a container to bottom of screen, added backdrop-blur then added a container to the dropdown, adding backdrop blur to that only seems to work above the top bar ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [October 16, 2025, 5:53pm UTC](https://forums.realmacsoftware.com/t/backdrop-blur-in-dropdown-content/51783/7 "2025-10-16T17:53:40Z")
@dan ‘s Sticky menu in the core pack behaves the exact same way. If you change the settings for background opacity in the main and submenu, and add some backdrop blur in the submenu setting it does not work, same as my example. ![CleanShot 2025-10-16 at 6 .49.57@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/6/a/6a044c1d0ea5ca42ddca91b5915c9a2808b8b545.jpeg) ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [October 16, 2025, 8:19pm UTC](https://forums.realmacsoftware.com/t/backdrop-blur-in-dropdown-content/51783/8 "2025-10-16T20:19:40Z")
Figured it out, but it’s not bu any means intuitive. You can not apply backdrop blur on a child of an element with backdrop blur. They are in the same stacking context. Isolate can’t help you here. So you must create two sibling stacking contexts. In the example I absolutely position a background with custom class for blur, as a sibling to the navigation content, then the blur on the dropdown works, as none of its ancestors have blur. ![CleanShot 2025-10-16 at 9 .14.32@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/8/5/85a9f08046c5a1cc0e54817793a08e8300bd73b5.jpeg) ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [October 16, 2025, 8:27pm UTC](https://forums.realmacsoftware.com/t/backdrop-blur-in-dropdown-content/51783/9 "2025-10-16T20:27:01Z")
Unlikely many would work that out, complicated ---
**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\ **Post date:** [October 16, 2025, 8:33pm UTC](https://forums.realmacsoftware.com/t/backdrop-blur-in-dropdown-content/51783/10 "2025-10-16T20:33:39Z")
Gary I was just about to say the same myself! 🤣🤣🤣 Ok WHAT? 🤯🤯🤯 ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [October 16, 2025, 8:49pm UTC](https://forums.realmacsoftware.com/t/backdrop-blur-in-dropdown-content/51783/11 "2025-10-16T20:49:33Z")
Only way I can explain… You (As I did) would intuitively add blur to this NAV. But you can’t. You must branch off into two stacks (stacking contexts), so neither blur shares a direct ancestor with blur (or any other filter effect). ![tree](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/0/0/00279c5e1d4ea4dc49ff4a28e67a9ef1d83d30d8.png)