Background blur issue

[pinkoboio]

I'm trying to configure my waybar to have a colored transparent background that is blurred by my compositor hyprland. I have configured hyprland to apply blur to the waybar layer and it works for about a second after waybar starts up but then the blur goes away but the bar remains translucent.

I have heard that the opacity keyword in the style.css file is problematic and that I should instead use rgba colors. I have since adjusted my stylesheet but unfortunately it doesn't seem that the alpha component of my rgba colors is being considered, that is to say my bar now has the right color but is completely opaque.

I can't be fully sure if this is an issue with waybar or hyprland, but considering that hyprland does apply blur correctly for about a second before startup I get the impression that it's waybar.

This other issue on the hyprland github shows how anytime the bar updates at all the blur loses its effect. This may be the root of the issue but it's unclear if this can be fixed on my end or if it's a larger issue with waybar itself.

EDIT: Technically the comment I'm speaking of in the link sort of has the opposite issue, in the sense that the blur doesn't apply by default but does apply whenever an update occurs. I seem to be having the reverse of this behavior...?

[Light034]

I'm having the same issue but with a different compositor, I use Wayfire and I have enabled blurring in the settings and it seems that it applies it to Waybar for a second until it updates and then is gone forever.

I have also tried to use rgba values but I get the same result, launching through the terminal I don't see any error messages or warnings.

[ashish-kus]

This might solve your issue.

window#waybar {
      background: rgba(17, 17, 27, 0.7); /* Semi-transparent */
 }