Box-shadow not working correctly in waybar

Ricing
1

hello, im trying to have a shadow around the whole waybar

window {    box-shadow: 0 0 10px #ff0000;}

this works except only the corners have the shadow and only because i have rounded borders.

window#waybar > box { box-shadow: 4px 4px 2px 1px #0000ff; }

this does not work at all

here is my waybar config file:

{
“layer”: “top”,
“output”: “HDMI-A-1”,
“position”: “top”,
“mode”: “dock”,
“margin”: “10px 10px 0”,
“modules-left”: [“hyprland/workspaces”,“mpris”],
“modules-center”: [“hyprland/window”],
“modules-right”: [“tray”,“custom/external-ip”,“network”,“pulseaudio”,“memory”,“cpu”,“clock”],

"hyprland/window": {
    "max-length": 100
},
"tray": {
    "spacing": 5
},
"network": {
    "format-ethernet": "",
    "format-linked": "",
    "format-disabled": "NET:DISABLED",
    "format-disconnected": "NET:DISCONNECTED",
    "interval": 5
},
"custom/external-ip": {
    "format": "IP:{}",
    "exec": "curl -s ifconfig.me",
    "interval": 2
},
"hyprland/workspaces": {
    "persistent-workspaces": {"*":5}
},
"cpu": {
    "format": "CPU:{usage}%",
    "interval": 1
},
"memory": {
    "format": "MEM:{percentage}%",
    "interval": 1
},
"clock": {
    "format": "TIME:{:%I:%M:%S}",
    "format-alt": "DATE:{:%m/%d/%Y}",
    "actions": {
        
    },
    "tooltip-format": "<tt><small>{calendar}</small></tt>",
    "calendar": {
	    "mode"          : "year",
	    "mode-mon-col"  : 3,
	    "weeks-pos"     : "right",
	    "on-scroll"     : 1,
	    "on-click-right": "mode",
	    "format": {
		    "months":     "<span color='#00ffff'><b>{}</b></span>",
		    "days":       "<span color='#00ffff'><b>{}</b></span>",
		    "weeks":      "<span color='#ff0000'><b>W{}</b></span>",
		    "weekdays":   "<span color='#ff0000'><b>{}</b></span>",
		    "today":      "<span color='#ff0000'><b><u>{}</u></b></span>"
	    }
    },
    "interval": 1
},
"pulseaudio": {
    "format": "VOL:{volume}%",
    "format-icons": {},
    "scroll-step": 2,
    "format-muted": "VOL:MUTED"
},
"mpris": {
    "format": "MUSIC:{title} [{position}/{length}]",
    "player": "kew",
    "interval": 1,
    "format-icons": {}
}

}

and here is my style.css file:

* {
    font-family: 'IBM Plex Mono';
    font-weight: bold;
    /* text-shadow: 0 0 6px cyan, 0 0 1px cyan; */
}
#mpris {
    color: cyan;
    margin-left: 4px;
}
window#waybar {
    background: transparent;
}
window {
    box-shadow: 0 0 10px #ff0000;
}
#waybar {
    border: 2px solid rgba(220,0,0,1);
    margin: 20px;
    border-radius: 10px;
    background: rgba(0,0,0,.25);
}
#custom-external-ip {
    color: cyan;
    margin-right: 10px;
    text-shadow: 0 0 6px cyan, 0 0 1px cyan;
}
#cpu {
    color: cyan;
    margin-right: 10px;
    text-shadow: 0 0 6px cyan, 0 0 1px cyan;
}
#memory {
    color: cyan;
    margin-right: 10px;
    text-shadow: 0 0 6px cyan, 0 0 1px cyan;
}
#network {
    color: cyan;
    margin-right: 10px;
    text-shadow: 0 0 6px cyan, 0 0 1px cyan;
}
#clock {
    color: cyan;
    margin-right: 14px;
    text-shadow: 0 0 6px cyan, 0 0 1px cyan;
}
#pulseaudio {
    color: cyan;
    margin-right: 10px;
    text-shadow: 0 0 6px cyan, 0 0 1px cyan;
}
#tray {
    margin-right: 10px;
    text-shadow: 0 0 6px cyan, 0 0 1px cyan;
}
#window {
    color: cyan;
    margin: 0 10px 0;
    text-shadow: 0 0 6px cyan, 0 0 1px cyan;
}
#workspaces {
    padding-left: 10px;
    color: transparent;
    transition: none;
}
#workspaces button {
    padding: 0px;
    color: cyan;
    transition: none;
    text-shadow: 0 0 6px cyan, 0 0 1px cyan;
}
#workspaces button:hover {
    color: red;
    background: transparent;
    border: 1px solid rgba(0,0,0,0);
    transition: none;
    padding: 0px;
    border-radius: 0px;
    font-weight: bold;
    box-shadow: none;
    text-shadow: 0 0 6px red, 0 0 1px red;
}
#workspaces button.active {
    color: rgb(220,0,0);
    font-weight: bold;
    text-shadow: 0 0 6px red, 0 0 1px red;
}
2

Waybar can’t draw a shadow outside its surface. You’ll need to add margins to your main background box (or padding to window).

3

is that not what “margin”: “10px 10px 0” is doing in my config? i also cant find a way to do “margin”: “10px 10px 0” in my styles file

#window {
    padding: 10px;
}

this makes the waybar enlarge, it doesnt add padding around the waybar, unless im doing it wrong.

ahh because its targeting hyprland/window

window {
    padding: 10px;
}

this didnt didnt do anything though and i thought u meant to put a pound symbol

4

I am not familiar with gtk’s workings, but you need margin around the base background layer, and add shadow to it.