How well blur works depends a lot on the compositor right now. The best support comes from compositors that implement ext-background-effect-v1. Other compositors such as Hyprland and Mango also support blur via layer rules but it can be hit or miss, in Hyprland it works well but in Mango I haven't been able to get it to work nicely yet.

Below is what I found works well.

For compositors that support it you can set theme.blur = true to let VibePanel hint directly to the compositor. This gives the panel full control over what, where, and when to blur, generally producing better results than generic compositor layer rules.

[theme]
blur = true

Blurred surfaces: bar, popovers, quick settings, OSD, notification toasts, tray menus, and media pop-out.

Some compositors need extra setup or compositor-specific rules.

Niri supports ext-background-effect-v1 so just enable blur in VibePanel's config:

[theme]
blur = true

By default, it will show the wallpaper behind the blur even if you open the popover over another window. This is because it's much more resource efficient but I don't think it makes much sense for a status bar so I disable that:

layer-rule {
    match namespace="^vibepanel(-(osd|toast|tooltip|.*-popover))?$"
    background-effect {
        xray false
    }
}

Hyprland doesn't support ext-background-effect-v1 at the time of writing but it is being worked on. Blurring in Hyprland works just fine via layer rules in my experience though:

layerrule {
    name = vibepanel_blur
    match:namespace = ^vibepanel.*$
    blur = on
    blur_popups = on
    ignore_alpha = 0.2
}

Mango provides blur via scenefx, which does not yet support ext-background-effect-v1 but it's on their roadmap to v1.

Just like with Hyprland it can still be enabled, I haven't been able to get it to play nicely but it can work with some compromises. If you want to try it here are my findings:

Shadows have to be disabled in VibePanel because there is no ignore alpha setting. Animations also have to be disabled or you will have weird behaviour when opening or closing a popover:

[theme]
animations = false
shadows = false

Enable blur in Mango:

blur=1                 # enable blur
blur_layer=1           # enable blur for layer shell surfaces
blur_optimized=0       # Prevent caching wallpaper, similar to disabling xray in niri
layerrule=noblur:1,layer_name:vibepanel-click-catcher # Since there is no ignore alpha we have to exclude click catcher

Now you should have blur but if you have weird artifacts around elements set this in VibePanel's style.css:

.popover,
.notification-toast,
.osd,
.widget {
    opacity: 0.999;
}