How to enable background blur for sfwbar menus in niri?

[ffs-akl]

I am using niri and have successfully enabled background blur for the main sfwbar panel. I achieved this by setting window#sfwbar and its buttons to semi-transparent in CSS, and matching the gtk-layer-shell namespace in niri's config.

However, I am having trouble with the start menu:

CSS Selector: I cannot find the correct CSS node to set the menu's background to semi-transparent. I have tried #menu without success. Is there a specific CSS node or ID for the menu container?

Namespace: Even if I make the menu transparent, I need to know if it uses a unique namespace (different from gtk-layer-shell) so I can apply the blur rule in my compositor. Does the menu surface have its own namespace?

Could you please clarify these two points?

Thanks for your help!

[LBCrion]

Menus create their own windows. I added a workaround that sets menu window name to the same name as the name of the menu in the latest git. Hopefully this helps. I see niri now has a PR for ext_background_effect protocol - this will be a better way to handle this. I want to get beta18 out and then I will take a crack at implementing ext_background_effect in sfwbar.

[ffs-akl]

Awesome, thanks for the fix! I'm going to pull the latest git and give it a try. I agree that ext_background_effect is the way to go for the future—it's exciting to see sfwbar evolving like this.

[ffs-akl]

Thanks for the update! I’ve tested the workaround, but it seems that in Niri, the menu (as an xdg_popup) doesn't export a name that the compositor can catch via window-rule.

I think I’ll just wait for your implementation of the ext-background-effect protocol instead. It sounds like a much more robust solution for handling these effects.

[LBCrion]

Niri 26.04 has added support for ext-background-effect. I merged initial support for background effects in sfwbar. So far it only applies to bar window. You can enable it using background = blur property.

…

On Thu, 5 Mar 2026, 05:08 ffs-akl, ***@***.***> wrote: Thanks for the update! I’ve tested the workaround, but it seems that in Niri, the menu (as an xdg_popup) doesn't export a name that the compositor can catch via window-rule. I think I’ll just wait for your implementation of the ext-background-effect protocol instead. It sounds like a much more robust solution for handling these effects. — Reply to this email directly, view it on GitHub <#450 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASHPFFDANVCP4ZDMVI7IPB34PEDURAVCNFSM6AAAAACV6A3PK2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTMMBQGUZTIOA> . You are receiving this because you commented.Message ID: ***@***.***>

[ffs-akl]

sfwbar-git-r2256.6eb3aa1 (ext-background-effects not implemented)
sfwbar-git-r2257.e1a7470 (ext-background-effects implemented)
With the same niri and sfwbar configuration (sfwbar did not have background=blur enabled):
sfwbar-git-r2257 clearly had no blur effect, while sfwbar-git-r2256 did.

screenshot for sfwbar-git-r2257.e1a7470

screenshot for sfwbar-git-r2256.6eb3aa1

Disabled blur effect in niri,Set background=blur in sfwbar-git-r2257.e1a7470 configuration file as follows:

#Api2
theme = "adw-gtk3"
IconTheme = "Qogir-Light"
background = "blur"

killall -s SIGHUP sfwbar
No blur effect is seen.

[LBCrion]

"background = blur" should be in the bar { } section.

…

On Tue, 28 Apr 2026, 14:26 ffs-akl, ***@***.***> wrote: sfwbar-git-r2256.6eb3aa1 (ext-background-effects not implemented) sfwbar-git-r2257.e1a7470 (ext-background-effects implemented) With the same niri and sfwbar configuration (sfwbar does not have background=blur enabled): sfwbar-git-r2257 clearly has no blur effect, while sfwbar-git-r2256 does. screenshot for sfwbar-git-r2257.e1a7470 grim-2026-04-28-204242.png (view on web) <https://github.com/user-attachments/assets/befb6f3e-d758-46d2-b4eb-d8ebac6352c7> screenshot for sfwbar-git-r2256.6eb3aa1 grim-2026-04-28-204409.png (view on web) <https://github.com/user-attachments/assets/41c8418c-b7d8-445b-9119-a1d4ea33a7dd> Disabled blur effect in niri,Setting background=blur in the sfwbar configuration file as follows: #Api2 theme = "adw-gtk3" IconTheme = "Qogir-Light" background = "blur" No blur effect is seen. — Reply to this email directly, view it on GitHub <#450 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASHPFFF76EA3YSQA7IGEG2L4YCWQXAVCNFSM6AAAAACV6A3PK2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTMNZUGM3DSMY> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you commented.Message ID: ***@***.***>

[ffs-akl]

Thanks, How to enable 'background=blur' in the wbar.config located in /usr/share/sfwbar/? There is no bar { } section in the wbar.config.

# Window Placer
placer {
........
}
switcher {
..................
}

include("winops.widget")

layout ":start" {
...............................
}

layout ":center" {
................................
}

layout ":end" {
..........................
}

[LBCrion]

You can do it in any of layout sections.

…

On Wed, 29 Apr 2026, 12:07 ffs-akl, ***@***.***> wrote: Thanks, How to enable 'background=blur' in the waybar.config located in /usr/share/sfwbar/? There is no bar { } section in the waybar.config. # Window Placer placer { ........ } switcher { .................. } include("winops.widget") layout ":start" { ............................... } layout ":center" { ................................ } layout ":end" { .......................... } — Reply to this email directly, view it on GitHub <#450 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASHPFFFITHM6UTBB6TFL6QL4YHO73AVCNFSM6AAAAACV6A3PK2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTMNZVGQ4DQOA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you commented.Message ID: ***@***.***>

[ffs-akl]

Thank you! It worked.

[ffs-akl]

sfwbar-git-r2259.6d81330
try to disable the blur effect for sfwbar in niri. However, the main sfwbar window still has the blur effect enabled, while the menus and popups do not.

[LBCrion]

You should now be able to control background effect for each widget (including menus). I changed the property name to background_effect. So you can add background_effect = blur to any widget y

…

On Fri, May 1, 2026 at 9:26 AM ffs-akl ***@***.***> wrote: sfwbar-git-r2259.6d81330 try to disable the blur effect for sfwbar in niri. However, the main sfwbar window still has the blur effect enabled, while the menus and popups do not. grim-2026-05-01-160506.png (view on web) <https://github.com/user-attachments/assets/bcef7581-492d-433e-aa38-571fc60e180b> — Reply to this email directly, view it on GitHub <#450 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASHPFFGB3KLXFWDWQLBGA534YRNSBAVCNFSM6AAAAACV6A3PK2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTMNZXG44TQMQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you commented.Message ID: ***@***.***>

[LBCrion]

It's now background_effect, not background. I changed it to make the purpose clearer.

…

On Mon, 4 May 2026, 13:38 ffs-akl, ***@***.***> wrote: The error "invalid container in widget declaration" occurs in both of the following formats: layout { --------------------- background = "blur" } layout { ----------------------- widget "clock.widget" { background = "blur" } } — Reply to this email directly, view it on GitHub <#450 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASHPFFCJA2ZJSRDRAZAWVOT4ZCFLFAVCNFSM6AAAAACV6A3PK2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTMOBQGQ3DAMA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you commented.Message ID: ***@***.***>

[ffs-akl]

The following formats do not produce a blur effect :

widget "clock.widget" {
        background_effect = "blur"
    }

layout ":start" { 
   ---------------------
    background_effect = "blur" 
    -------------------------
}

With the following setting:

widget "startmenu.widget" {
background_effect = "blur"
}
The following error is reported:

sfwbar -f ~/.config/sfwbar/sfwbar-niri.config
Gdk-Message: 20:58:29.682: Error 71 (Protocol error) dispatching to Wayland display.

[LBCrion]

This should be fixed in the latest git version. Thank you for spotting it!

…

On Mon, May 4, 2026 at 2:12 PM ffs-akl ***@***.***> wrote: The following formats do not produce a blur effect : widget "clock.widget" { background_effect = "blur" } layout ":start" { --------------------- background_effect = "blur" ------------------------- } grim-2026-05-04-205605.png (view on web) <https://github.com/user-attachments/assets/6919c6c2-4195-4089-bf0e-12a7729d4455> With the following setting: widget "startmenu.widget" { background_effect = "blur" } The following error is reported: sfwbar -f ~/.config/sfwbar/sfwbar-niri.config Gdk-Message: 20:58:29.682: Error 71 (Protocol error) dispatching to Wayland display. — Reply to this email directly, view it on GitHub <#450 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASHPFFECK43R2MQRA5HO2QD4ZCJL7AVCNFSM6AAAAACV6A3PK2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTMOBQGQ4TQMY> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you commented.Message ID: ***@***.***>

[ffs-akl]

This is my config file
sfwbar.config.txt

[LBCrion]

I think it is working. Keep in mind that: include "clock.widget" { background_effect = true } will assign blurry background to the clock in the taskbar, not to the popup. If you want to blur the background under a popup, you should add (outside of any layout or bar sections): Popup "XCal" { background_effect = blur }

…

On Wed, May 6, 2026 at 1:32 PM ffs-akl ***@***.***> wrote: This is my config file sfwbar.config.txt <https://github.com/user-attachments/files/27439296/sfwbar.config.txt> grim-2026-05-06-201654.png (view on web) <https://github.com/user-attachments/assets/7d953a41-9bfa-4862-888c-17d51ea59eb6> — Reply to this email directly, view it on GitHub <#450 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASHPFFGWHCIVKQ5CX2OKISD4ZMWERAVCNFSM6AAAAACV6A3PK2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTMOBSG4YTGMY> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you commented.Message ID: ***@***.***>

[ffs-akl]

sfwbar-git-r2266.90f3d3a
The following formats produce a blur effect :
Popup "XCal" { background_effect = blur }
by the way, How to enable the blur for menu?

This setup produces a blur effect that appears distinctly fragmented into three sections. However, using Niri's layer-rule achieves a uniform blur without any banding or discontinuity."

layout ":start" {
background_effect = "blur" 
}
layout ":center" {
background_effect = "blur" 
}
layout ":end" {
background_effect = "blur" 
}

[ffs-akl]

menu "app_menu_system" { background_effect = "blur" } only produces a blur effect for the main menu, but not for any submenus.

[LBCrion]

I moved configuration of background effect to CSS. background_effect widget property won't work anymore, instead you can use a CSS property -GtkWidget-background-effect: blur to control which widgets should have blurred background. This should allow applying it to all menus if you want and you can now apply it to the bar window element, so it covers the whole bar rather than individual box segments.

[ffs-akl]

The following formats produce a blur effect for whole bar rather than individual box segments.

window#sfwbar   { 
     background:  alpha(@theme_bg_color, 0.6);
     -GtkWidget-background-effect: blur;
}  

But the following formats didn't produce a blur effect for menu

menu {
   background:  alpha(@theme_bg_color, 0.6);
     -GtkWidget-background-effect: blur;
} 

widget "startmenu.widget" {
       icon = "niri"
       css = "* { -GtkWidget-background-effect: blur; }"
      }

[LBCrion]

Can you check the menus with the latest git version please when you get a chance?

[ffs-akl]

Thanks, Now menus get blur effects.

[ffs-akl]

Here are two issues I found on my side:

1.The menu arrows in the first-level menu are no longer aligned like in the previous version, which also causes the second-level menus to be misaligned.
2.The menus for tray widgets like networkmanager and fcitx5 cannot be blurred.

By the way, how can I blur popups and tooltips?

[LBCrion]

Thank you. These cases should hopefully be fixed in the latest git version.

…

On Sat, May 16, 2026 at 3:48 AM ffs-akl ***@***.***> wrote: Here are two issues I found on my side: 1.The menu arrows in the first-level menu are no longer aligned like in the previous version, which also causes the second-level menus to be misaligned. 2.The menus for tray widgets like networkmanager and fcitx5 cannot be blurred. By the way, how can I blur popups and tooltips? — Reply to this email directly, view it on GitHub <#450 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASHPFFBM7BQD3KY2CCG6NFT427JHNAVCNFSM6AAAAACV6A3PK2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTMOJTG42DIMA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you commented.Message ID: ***@***.***>

[ffs-akl]

Thanks, the blur effect works great on all menus!
Quick question: how do I apply the blur effect to popups and tooltips (like the volume widget popup)?
I've tried the following format, but with no luck:

window#XVolumeWindow {
  background:  alpha(@theme_bg_color, 0.6);
  -GtkWidget-background-effect: blur;
}

[LBCrion]

The above CSS snippet works for me, although it may not the best node to apply the blur to, as it will cover the margins around the popup border as well as the popup itself. It may be better to use grid#volume_popup

…

On Sat, May 16, 2026 at 1:14 PM ffs-akl ***@***.***> wrote: Thanks, the blur effect works great on all menus! Quick question: how do I apply the blur effect to popups and tooltips (like the volume widget popup)? I've tried the following format, but with no luck: window#XVolumeWindow { background: ***@***.***_bg_color, 0.6); -GtkWidget-background-effect: blur; } — Reply to this email directly, view it on GitHub <#450 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASHPFFAHM2ZTDP4WPPINOSL43BLSRAVCNFSM6AAAAACV6A3PK2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTMOJTHE4DIMQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you commented.Message ID: ***@***.***>

[ffs-akl]

Thank you! I managed to find the selectors for cal.widget and bluez.widget popups using the Inspector and successfully blurred them. However, taskbar_popup and tooltip are too difficult to capture.
Here are the specific issues I'm running into:

window#taskbar_popup { 
  background: alpha(@theme_bg_color, 0.6);
  -GtkWidget-background-effect: blur;
}

This blurs the window edge, but all internal labels/icons ignore my CSS. What is the exact node hierarchy or class/ID names inside taskbar_popup?

tooltip {  
  background: alpha(@theme_bg_color, 0.6);
  -GtkWidget-background-effect: blur;
}

Alpha transparency works, but blur does not.

[LBCrion]

window#taskbar_popup is the correct node, but taskbar_item's have background set by default in w10.config, so you'll need to change this as well for the blur to be visible. Tooltips will be tricky, I'll need to work on them.

…

On Mon, May 18, 2026 at 2:51 PM ffs-akl ***@***.***> wrote: Thank you! I managed to find the selectors for cal.widget and bluez.widget popups using the Inspector and successfully blurred them. However, taskbar_popup and tooltip are too difficult to capture. Here are the specific issues I'm running into: window#taskbar_popup { background: ***@***.***_bg_color, 0.6); -GtkWidget-background-effect: blur; } This blurs the window edge, but all internal labels/icons ignore my CSS. What is the exact node hierarchy or class/ID names inside taskbar_popup? grim-2026-05-18-212500.png (view on web) <https://github.com/user-attachments/assets/807695f6-213a-4727-80f5-8cad7e758c47> tooltip { background: ***@***.***_bg_color, 0.6); -GtkWidget-background-effect: blur; } Alpha transparency works, but blur does not. grim-2026-05-18-213214.png (view on web) <https://github.com/user-attachments/assets/2c9465e5-5d40-4e4d-a810-9c96b665675a> — Reply to this email directly, view it on GitHub <#450?email_source=notifications&email_token=ASHPFFBQ5E4A2NXI2XPLNA343MIPHA5CNFSNUABIM5UWIORPF5TWS5BNNB2WEL2ENFZWG5LTONUW63SDN5WW2ZLOOQXTCNRZGYZDCNJQUZZGKYLTN5XKOY3PNVWWK3TUUVSXMZLOOSWGM33PORSXEX3DNRUWG2Y#discussioncomment-16962150>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASHPFFGL2A3XVUYFXK3W5K343MIPHAVCNFSM6AAAAACV6A3PK2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTMOJWGIYTKMA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you commented.Message ID: ***@***.***>

[ffs-akl]

Thanks, the following format produce a prefect blur effect.

window#taskbar_popup button { 
  background: alpha(@theme_bg_color, 0.6);
  -GtkWidget-background-effect: blur;
}