[GH-ISSUE #1083] Transparency issue without knowing what the problem is with my setup!.

JakeStanger commented

2026-05-23 03:54:14 +01:00

Owner

Originally created by @Mezo0n on GitHub (Jul 13, 2025).
Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/1083

Hello there, I’m pretty new to all this, so thanks for bearing with me . I’m trying to get transparency working properly on my setup. So far, I’ve managed to get some really nice blur effects in Rofi, and Waybar looks great too.
Recently, I ran into issues with Ironbar, after I switched over from hypr-dock—but I’m facing the same transparency problem. Waybar and Rofi work fine, and blur in general looks amazing, so I’m puzzled as to why transparency doesn’t seem to work properly in either Ironbar or hypr-dock.
before, I had a small discussion with the maintainer of the hypr-dock repo : https://github.com/lotos-linux/hypr-dock/discussions/3 (—just sharing for context.)
and now in Ironbar it looks like this :

#bar {
    border-top: 1px solid #ff00ff;
    background: transparent;
}

with the result of :

but, whenever i try :


#bar {
    border-top: 1px solid #ff00ff;
    background: #ff00ff66;
}

the result is :

I'm using Arch/Hyprland BTW.
and i really started to feel down because whatever i try it simply won't work , hope i find the solution here.
And thanks for help anyway!

Originally created by @Mezo0n on GitHub (Jul 13, 2025). Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/1083 Hello there, I’m pretty new to all this, so thanks for bearing with me . I’m trying to get transparency working properly on my setup. So far, I’ve managed to get some really nice blur effects in Rofi, and Waybar looks great too. Recently, I ran into issues with Ironbar, after I switched over from hypr-dock—but I’m facing the same transparency problem. Waybar and Rofi work fine, and blur in general looks amazing, so I’m puzzled as to why transparency doesn’t seem to work properly in either Ironbar or hypr-dock. before, I had a small discussion with the maintainer of the hypr-dock repo : https://github.com/lotos-linux/hypr-dock/discussions/3 (—just sharing for context.) and now in Ironbar it looks like this : ``` #bar { border-top: 1px solid #ff00ff; background: transparent; } ``` with the result of : <img width="1366" height="42" alt="Image" src="https://github.com/user-attachments/assets/114e6270-dc8b-40ab-b84f-21c6d6d6e5f1" /> but, whenever i try : ``` #bar { border-top: 1px solid #ff00ff; background: #ff00ff66; } ``` the result is : <img width="1366" height="44" alt="Image" src="https://github.com/user-attachments/assets/f463fca3-a844-429a-a633-14e1317413fe" /> I'm using Arch/Hyprland BTW. and i really started to feel down because whatever i try it simply won't work , hope i find the solution here. And thanks for help anyway!

JakeStanger

2026-05-23 03:54:14 +01:00

closed this issue
added the
T:Question

A:Config
labels

JakeStanger commented

2026-05-23 03:54:14 +01:00

Author

Owner

@postsolar commented on GitHub (Jul 13, 2025):

If your issue is that transparency works but blur doesn't, I think it's that you're missing layer rules in your Hyprland config.

layerrule = blur, ironbar
# optionally, don't blur anything fully-transparent
# layerrule = ignorezero, ironbar
# optionally, set a threshold for alpha values to get blur
# layerrule = ignorealpha 0.5, ironbar

Here's what my bar looks like normally:

Now let's add some layer rules:

$ hyprctl keyword layerrule 'blur, ironbar'
$ hyprctl keyword layerrule 'ignorezero, ironbar'

And adjust my bar a little bit to better highlight it, as it's not really set up for transparency:

* {
  box-shadow: none;
}

#bar {
  background: rgba(1, 1, 1, 0.5);
}

And here's the result

@postsolar commented on GitHub (Jul 13, 2025): If your issue is that transparency works but blur doesn't, I think it's that you're missing layer rules in your Hyprland config. ``` layerrule = blur, ironbar # optionally, don't blur anything fully-transparent # layerrule = ignorezero, ironbar # optionally, set a threshold for alpha values to get blur # layerrule = ignorealpha 0.5, ironbar ``` Here's what my bar looks like normally: <img width="1600" height="51" alt="Image" src="https://github.com/user-attachments/assets/7fc1b0b8-c547-45db-aaed-2efa113087fe" /> Now let's add some layer rules: ``` $ hyprctl keyword layerrule 'blur, ironbar' $ hyprctl keyword layerrule 'ignorezero, ironbar' ``` And adjust my bar a little bit to better highlight it, as it's not really set up for transparency: ``` * { box-shadow: none; } #bar { background: rgba(1, 1, 1, 0.5); } ``` And here's the result <img width="1600" height="52" alt="Image" src="https://github.com/user-attachments/assets/8cfe8339-b70a-484e-a03b-c17db21c1bb2" />

JakeStanger commented

2026-05-23 03:54:14 +01:00

Author

Owner

@Mezo0n commented on GitHub (Jul 13, 2025):

though i must only do the lines in my windowrule section in my hyprland.conf but i haven't heard about :

$ hyprctl keyword layerrule 'blur, ironbar'
$ hyprctl keyword layerrule 'ignorezero, ironbar'

Thanks a lot! you saved me hell of time!

but sadly it didn't work .
maybe it is style.css because i copied paste the default ones in the wiki
the modification I've noticed after the hyprctl keywork layerrule thing is that it respects the color i give
here's the style.css i have but still the same issue transparency with the current state of the bar :
changed the bar and the popup-volume for example .

@define-color color_bg #141414;
@define-color color_bg_dark #1c1c1c;
@define-color color_border #424242;
@define-color color_border_active #6699cc;
@define-color color_text #ffffff;
@define-color color_urgent #8f0a0a;
@define-color no-color transparent;

/* -- base styles -- */

* {
    font-family: JetBrainsMono Nerd Font;
    font-size: 0.96em;
    border: none;
    border-radius: 0;
}

box, menubar, button {
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}

button, label {
    color: @color_text;
}

button:hover {
    background-color: @color_bg_dark;
}

scale trough {
    min-width: 1px;
    min-height: 2px;
}

#bar {
    border-top: 1px solid @color_bg_dark;
    background: rgba(1, 1, 1, 0.5);}

.popup {
    border: 1px solid @color_border;
    padding: 1em;
}


/* -- clipboard -- */

.clipboard {
    font-size: 1.1em;
}

.popup-clipboard .item {
    padding-bottom: 0.3em;
    border-bottom: 1px solid @color_border;
}


/* -- clock -- */

.clock {
    font-weight: bold;
}

.popup-clock .calendar-clock {
    color: @color_text;
    font-size: 2.5em;
    padding-bottom: 0.1em;
}

.popup-clock .calendar {
    background-color: @color_bg;
    color: @color_text;
}

.popup-clock .calendar .header {
    padding-top: 1em;
    border-top: 1px solid @color_border;
    font-size: 1.5em;
}

.popup-clock .calendar:selected {
    background-color: @color_border_active;
}


/* -- launcher -- */

.launcher .item {
    margin-right: 0px;
}

.launcher .ifix examtem:not(.focused):hover {
    background-color: @color_bg_dark;
}

.launcher .open {
    border-bottom: 1px solid @color_text;
}

.launcher .focused {
    border-bottom: 1px solid @color_border_active;
}

.launcher .urgent {
    border-bottom-color: @color_urgent;
}

.popup-launcher {
    padding: 0;
}

.popup-launcher .popup-item:not(:first-child) {
    border-top: 1px solid @color_border;
}


/* -- music -- */

.music:hover * {
    background-color: @color_bg_dark;
}

.popup-music .album-art {
    margin-right: 1em;
}

.popup-music .icon-box {
    margin-right: 0.4em;
}

.popup-music .title .icon, .popup-music .title .label {
    font-size: 1.7em;
}

.popup-music .controls *:disabled {
    color: @color_border;
}

.popup-music .volume .slider slider {
    border-radius: 100%;
}

.popup-music .volume .icon {
    margin-left: 4px;
}

.popup-music .progress .slider slider {
    border-radius: 100%;
}

/* notifications */

.notifications .count {
    font-size: 0.6rem;
    background-color: @color_text;
    color: @color_bg;
    border-radius: 100%;
    margin-right: 3px;
    margin-top: 3px;
    padding-left: 4px;
    padding-right: 4px;
    opacity: 0.7;
}

/* -- script -- */

.script {
    padding-left: 10px;
}


/* -- sys_info -- */

.sysinfo {
    margin-left: 10px;
}

.sysinfo .item {
    margin-left: 5px;
}


/* -- tray -- */

.tray {
    margin-left: 10px;
}

/* -- volume -- */

.popup-volume .device-box {
    border-right: 1px solid @color_border;
    background: transparent;
}

/* -- workspaces -- */

.workspaces .item.focused {
    box-shadow: inset 0 -3px;
    background-color: @color_bg_dark;
}

.workspaces .item.urgent {
    background-color: @color_urgent;
}

.workspaces .item:hover {
    box-shadow: inset 0 -3px;
}


/* -- custom: power menu -- */

.popup-power-menu #header {
    font-size: 1.4em;
    padding-bottom: 0.4em;
    margin-bottom: 0.6em;
    border-bottom: 1px solid @color_border;
}

.popup-power-menu .power-btn {
    border: 1px solid @color_border;
    padding: 0.6em 1em;
}

.popup-power-menu #buttons > *:nth-child(1) .power-btn {
    margin-right: 1em;
}

oh and it's not about blur only but it's about transparency too. as i said i only faced this issue with ironbar and hypr-dock it won't go transparent (or blur) at all.
if you still wondering.

If your issue is that transparency works but blur doesn't,

but thanks for your time i really appreciate it!
@postsolar

@Mezo0n commented on GitHub (Jul 13, 2025): though i must only do the lines in my windowrule section in my hyprland.conf but i haven't heard about : > $ hyprctl keyword layerrule 'blur, ironbar' > $ hyprctl keyword layerrule 'ignorezero, ironbar' Thanks a lot! you saved me hell of time! but sadly it didn't work . maybe it is style.css because i copied paste the default ones in the wiki the modification I've noticed after the hyprctl keywork layerrule thing is that it respects the color i give here's the style.css i have but still the same issue transparency with the current state of the bar : changed the bar and the popup-volume for example . ``` @define-color color_bg #141414; @define-color color_bg_dark #1c1c1c; @define-color color_border #424242; @define-color color_border_active #6699cc; @define-color color_text #ffffff; @define-color color_urgent #8f0a0a; @define-color no-color transparent; /* -- base styles -- */ * { font-family: JetBrainsMono Nerd Font; font-size: 0.96em; border: none; border-radius: 0; } box, menubar, button { background-color: transparent; background-image: none; box-shadow: none; } button, label { color: @color_text; } button:hover { background-color: @color_bg_dark; } scale trough { min-width: 1px; min-height: 2px; } #bar { border-top: 1px solid @color_bg_dark; background: rgba(1, 1, 1, 0.5);} .popup { border: 1px solid @color_border; padding: 1em; } /* -- clipboard -- */ .clipboard { font-size: 1.1em; } .popup-clipboard .item { padding-bottom: 0.3em; border-bottom: 1px solid @color_border; } /* -- clock -- */ .clock { font-weight: bold; } .popup-clock .calendar-clock { color: @color_text; font-size: 2.5em; padding-bottom: 0.1em; } .popup-clock .calendar { background-color: @color_bg; color: @color_text; } .popup-clock .calendar .header { padding-top: 1em; border-top: 1px solid @color_border; font-size: 1.5em; } .popup-clock .calendar:selected { background-color: @color_border_active; } /* -- launcher -- */ .launcher .item { margin-right: 0px; } .launcher .ifix examtem:not(.focused):hover { background-color: @color_bg_dark; } .launcher .open { border-bottom: 1px solid @color_text; } .launcher .focused { border-bottom: 1px solid @color_border_active; } .launcher .urgent { border-bottom-color: @color_urgent; } .popup-launcher { padding: 0; } .popup-launcher .popup-item:not(:first-child) { border-top: 1px solid @color_border; } /* -- music -- */ .music:hover * { background-color: @color_bg_dark; } .popup-music .album-art { margin-right: 1em; } .popup-music .icon-box { margin-right: 0.4em; } .popup-music .title .icon, .popup-music .title .label { font-size: 1.7em; } .popup-music .controls *:disabled { color: @color_border; } .popup-music .volume .slider slider { border-radius: 100%; } .popup-music .volume .icon { margin-left: 4px; } .popup-music .progress .slider slider { border-radius: 100%; } /* notifications */ .notifications .count { font-size: 0.6rem; background-color: @color_text; color: @color_bg; border-radius: 100%; margin-right: 3px; margin-top: 3px; padding-left: 4px; padding-right: 4px; opacity: 0.7; } /* -- script -- */ .script { padding-left: 10px; } /* -- sys_info -- */ .sysinfo { margin-left: 10px; } .sysinfo .item { margin-left: 5px; } /* -- tray -- */ .tray { margin-left: 10px; } /* -- volume -- */ .popup-volume .device-box { border-right: 1px solid @color_border; background: transparent; } /* -- workspaces -- */ .workspaces .item.focused { box-shadow: inset 0 -3px; background-color: @color_bg_dark; } .workspaces .item.urgent { background-color: @color_urgent; } .workspaces .item:hover { box-shadow: inset 0 -3px; } /* -- custom: power menu -- */ .popup-power-menu #header { font-size: 1.4em; padding-bottom: 0.4em; margin-bottom: 0.6em; border-bottom: 1px solid @color_border; } .popup-power-menu .power-btn { border: 1px solid @color_border; padding: 0.6em 1em; } .popup-power-menu #buttons > *:nth-child(1) .power-btn { margin-right: 1em; } ``` <img width="1366" height="253" alt="Image" src="https://github.com/user-attachments/assets/536fe9ca-ad54-47e7-a6bc-6c43ac99aeb2" /> oh and it's not about blur only but it's about transparency too. as i said i only faced this issue with ironbar and hypr-dock it won't go transparent (or blur) at all. if you still wondering. > If your issue is that transparency works but blur doesn't, but thanks for your time i really appreciate it! @postsolar

JakeStanger commented

2026-05-23 03:54:14 +01:00

Author

Owner

@postsolar commented on GitHub (Jul 13, 2025):

In the CSS you posted you don't style the background class. If you add

.background {
  background: none;
}

then it's transparent. When debugging your CSS in GTK apps you should use GTK inspector. In Ironbar you can run it with ironbar inspect — take your time to study this tool, it's irreplaceably helpful. Especially the CSS Nodes tab, it'd show you the tree of all the CSS nodes in your app, as well as all properties for every node. CSS Nodes tab is where you'd spend most of your time.

@postsolar commented on GitHub (Jul 13, 2025): In the CSS you posted you don't style the `background` class. If you add ```css .background { background: none; } ``` then it's transparent. When debugging your CSS in GTK apps you should use GTK inspector. In Ironbar you can run it with `ironbar inspect` — take your time to study this tool, it's irreplaceably helpful. Especially the `CSS Nodes` tab, it'd show you the tree of all the CSS nodes in your app, as well as all properties for every node. `CSS Nodes` tab is where you'd spend most of your time.

JakeStanger commented

2026-05-23 03:54:14 +01:00

Author

Owner

@Mezo0n commented on GitHub (Jul 13, 2025):

Just wanted to drop a massive THANK YOU here! I’m genuinely not sure how to express my gratitude enough—you totally saved me today.

That solution worked beautifully, and I’ll absolutely follow through on your advice.

I’ve only been using Linux for 2 months, but I’m loving the experience so far. There’s so much to learn and explore, and today was a perfect reminder of how amazing the community is.

Thanks again for being my saviour.
I was really starting to feel discouraged, and your help turned my day around.

@Mezo0n commented on GitHub (Jul 13, 2025): Just wanted to drop a massive THANK YOU here! I’m genuinely not sure how to express my gratitude enough—you totally saved me today. That solution worked beautifully, and I’ll absolutely follow through on your advice. I’ve only been using Linux for 2 months, but I’m loving the experience so far. There’s so much to learn and explore, and today was a perfect reminder of how amazing the community is. Thanks again for being my saviour. I was really starting to feel discouraged, and your help turned my day around.

JakeStanger commented

2026-05-23 03:54:14 +01:00

Author

Owner

@JakeStanger commented on GitHub (Jul 14, 2025):

Just want to add and say thanks too! It's really nice to see a community start to form, and I'm glad to know things don't grind to a halt when I'm not around for a few days

@JakeStanger commented on GitHub (Jul 14, 2025): Just want to add and say thanks too! It's really nice to see a community start to form, and I'm glad to know things don't grind to a halt when I'm not around for a few days

JakeStanger commented

2026-05-23 03:54:14 +01:00

Author

Owner

@Mezo0n commented on GitHub (Jul 17, 2025):

Just want to add and say thanks too! It's really nice to see a community start to form, and I'm glad to know things don't grind to a halt when I'm not around for a few days

thanks to you too and this awesome bar you've made, I'm really lost not because i don't know what to do, but with how much i can do with it .
also the inspect tool is such a game changer!
wasn't expecting that actually haha

but since we're talking i would like to know your opinion about something (it might be here not the good place discussing it ) but my curiosity may kill me at the end and i found your kindness a good opportunity to talk about it.
and hell i tried a lot of options including the one it solved my issue with ironbar here.
and didn't work .. as you see i made a reference on my first comment to hypr-dock and none worked.
lastly i tried to add.

$ hyprctl keyword layerrule 'blur, hypr-dock'
$ hyprctl keyword layerrule 'ignorezero, hypr-dock'

i even found out that it has multiple layers ( don't know about the other one but i tried to add it to Layerrrule think it called dock-detect ( forgive my stupidity) but nothing worked, I'm not sure what the issue is. i was thinking i might do a full re-installation (because i messed up with my current setup even tho it is working great but i want to make it cleaner) it's my first Linux experience and it's been almost 3 months now .you know git my dots and reuse it for the next setup that i wanna build.
and sorry if I'm wasting your time , also since it is nothing related to Ironbar you're completely free to answer but i would also post it there if it was a sensitive issue or just blame myself for my mistakes haha.

@Mezo0n commented on GitHub (Jul 17, 2025): > Just want to add and say thanks too! It's really nice to see a community start to form, and I'm glad to know things don't grind to a halt when I'm not around for a few days thanks to you too and this awesome bar you've made, I'm really lost not because i don't know what to do, but with how much i can do with it . also the inspect tool is such a game changer! wasn't expecting that actually haha but since we're talking i would like to know your opinion about something (it might be here not the good place discussing it ) but my curiosity may kill me at the end and i found your kindness a good opportunity to talk about it. and hell i tried a lot of options including the one it solved my issue with ironbar here. and didn't work .. as you see i made a reference on my first comment to hypr-dock and none worked. lastly i tried to add. ``` $ hyprctl keyword layerrule 'blur, hypr-dock' $ hyprctl keyword layerrule 'ignorezero, hypr-dock' ``` i even found out that it has multiple layers ( don't know about the other one but i tried to add it to Layerrrule think it called dock-detect ( forgive my stupidity) but nothing worked, I'm not sure what the issue is. i was thinking i might do a full re-installation (because i messed up with my current setup even tho it is working great but i want to make it cleaner) it's my first Linux experience and it's been almost 3 months now .you know git my dots and reuse it for the next setup that i wanna build. and sorry if I'm wasting your time , also since it is nothing related to Ironbar you're completely free to answer but i would also post it there if it was a sensitive issue or just blame myself for my mistakes haha.

JakeStanger commented

2026-05-23 03:54:14 +01:00

Author

Owner

@JakeStanger commented on GitHub (Jul 17, 2025):

also the inspect tool is such a game changer!
wasn't expecting that actually haha

I can't take credit for that one, that's built into GTK. You can actually run any GTK program with GTK_DEBUG=interactive and it'll pop up.

I've never touched hypr-dock so I can't help with that I'm afraid. I probably wouldn't do a full re-install unless you particularly want to - normally it just creates more work than its worth to sort a simple configuration issue.

@JakeStanger commented on GitHub (Jul 17, 2025): > also the inspect tool is such a game changer! wasn't expecting that actually haha I can't take credit for that one, that's built into GTK. You can actually run any GTK program with `GTK_DEBUG=interactive` and it'll pop up. I've never touched hypr-dock so I can't help with that I'm afraid. I probably wouldn't do a full re-install unless you particularly want to - normally it just creates more work than its worth to sort a simple configuration issue.

JakeStanger commented

2026-05-23 03:54:14 +01:00

Author

Owner

@Mezo0n commented on GitHub (Jul 17, 2025):

I can't take credit for that one, that's built into GTK. You can actually run any GTK program with GTK_DEBUG=interactive and it'll pop up.

oh yea just figured it out hahaha.

No worries. You're awesome and thanks for supporting our dump questions hah!
yea exactly that's why i'm trying my best not too actually.
it's not windows after all. it is linux (as windows dies in mysterious ways lmao!).

@Mezo0n commented on GitHub (Jul 17, 2025): > I can't take credit for that one, that's built into GTK. You can actually run any GTK program with GTK_DEBUG=interactive and it'll pop up. oh yea just figured it out hahaha. No worries. You're awesome and thanks for supporting our dump questions hah! yea exactly that's why i'm trying my best not too actually. it's not windows after all. it is linux (as windows dies in mysterious ways lmao!).

JakeStanger commented

2026-05-23 03:54:14 +01:00

Author

Owner

@sujer-ux commented on GitHub (Jul 26, 2025):

@Mezo0n

Regarding the dock-detect layer

This is a technical layer. It's only one pixel thick and exists solely to detect mouse presence in the dock area, allowing the dock to be raised to the top layer when needed. Styling it or applying rules to it makes no sense.

@sujer-ux commented on GitHub (Jul 26, 2025): @Mezo0n Regarding the `dock-detect` layer This is a technical layer. It's only one pixel thick and exists solely to detect mouse presence in the dock area, allowing the dock to be raised to the top layer when needed. Styling it or applying rules to it makes no sense.

Rows
Columns

[GH-ISSUE #1083] Transparency issue without knowing what the problem is with my setup!. #8770