Make Gnome applications sidebar semi-transparent, and add blur with Blur My Shell Extension if you want to

gnome-transparent-sidebar.css

/* Mohammad Mahdi Tayebi
 * 
 * To apply transparent sidebar. copy this file into ~/.config/gtk-4.0/gtk.css and if 
 * you use adw-gtk3 theme you can add it to ~/.config/gtk-3.0/gtk.css as well
 * 
 * Use blur my shell extension to add blur effect behind the transparent part of windows
*/

/* Transparent Sidebar */
window {
  background: alpha(@window_bg_color, 0.8);
}

.sidebar-pane,
.sidebar,
.navigation-sidebar {
  background: transparent;
}

.content-pane {
  background: @view_bg_color;
}

/* Lollypop */
window>deck>grid>headerbar.titlebar>widget>widget>box>image {
  margin-top: -1px;
}

window>deck>grid>headerbar.titlebar>box> :nth-child(1) {
  margin-right: -40px;
  opacity: 0;
}

window>deck>grid>headerbar.titlebar>box> :nth-child(2) {
  margin-right: 27px;
}

window>deck>grid>headerbar.titlebar>box>.close {
  margin-right: 0;
}

window>deck>grid>headerbar.titlebar {
  background: linear-gradient(90deg,
      transparent 0%,
      transparent 197px,
      @headerbar_shade_color 198px,
      @headerbar_bg_color 198px,
      @headerbar_bg_color 100%);
  border-bottom: none;
}

/* Builder */
.org-gnome-Builder paneldockchild.center {
  background: @window_bg_color;
}

.org-gnome-Builder.workspace paneldockchild.start {
  background: transparent;
}

/* Speedtest (xyz.ketok.Speedtest) */
.horizontal>gauge.dl.horizontal>overlay>.background {
  background: transparent;
}

.horizontal>gauge.up.horizontal>overlay>.background {
  background: transparent;
}

/* Gnome Tweaks */
window>leaflet>box:last-child>scrolledwindow>viewport.frame {
  background: @window_bg_color;
}

.tweak-titlebar-left {
  background: alpha(@window_bg_color, 0.8);
}

/* Geary */
.geary-main-layout>leaflet>leaflet>box:first-child,
.geary-main-layout>leaflet>leaflet>box:first-child>headerbar {
  background: transparent;
}

I'll try to keep this gist up to date and style for more applications to it.
Currently it support most of the Libadwaita apps and some GTK-3 (like Lollypop) apps if you use adw-gtk3 theme

Here's a Screenshot of it

I am using the colloid theme but it doesn't work when I paste the css into the gtk config file

I am using the colloid theme but it doesn't work when I paste the css into the gtk config file

Edit:
I was able to fix it by adding the colors from the theme file

So nice, will try.

I am using the colloid theme but it doesn't work when I paste the css into the gtk config file

Edit: I was able to fix it by adding the colors from the theme file

@KickdeGans I didn't understand what was wrong, everything looks good in your screenshot. But I'm glad you fixed it.

Hi! Awesome! I was trying it and discovered this "artifact" on the top left corner of the windows

It exists on your screenshots too. Is there any way to remove it?

Hi! Awesome! I was trying it and discovered this "artifact" on the top left corner of the windows

It exists on your screenshots too. Is there any way to remove it?

@gabmartini Hi. It's caused by Gnome shell itself, and unfortunately, there's no way to fix it until Gnome adds the necessary features.
There is a discussion about it on Blur my shell repository issues if you're interested.

It's not a gnome bug, but Mutter needs to support blur, so blur my shell extension can fix this artifact

It's working flawlessly with my theme now.
What I did is add the colors from the theme into the gtk4 config file and then added the css code.
Then set blur my shell to no artifact and enabled blur for all applications, then set opacity to 255 to make sure there are no square corners.

I'm not using any theme but I get only the transparent effect no blur :( (using fedora 39 w/ Gnome 45.3)

I'm not using any theme but I get only the transparent effect no blur :( (using fedora 39 w/ Gnome 45.3)

@ebanDev Install blur my shell extension, go to applications section (or tab, I don't know)
Enable it
If you don't care about CPU/GPU usage, enable it for all applications. If you want to save resources, you need to type WM_CLASS of applications that have transparency manually because the app selector doesn't work (at least not for me but try it)

Is it possible to make kgx transparent by this?

Is it possible to make kgx transparent by this?

@MooCrumpus To make Gnome Console transparent, you need to modify its source code and remove the background color of the terminal window, then recompile it.
After that, you can use CSS to change the background color and opacity of main window.
I used to do this before but now I just use Blackbox, it's easier.

Is it possbile to get this working for adw-gtk3? Sidebars in GTK apps look awesome but gnome tweaks and geary would look better with blur.

Is it possbile to get this working for adw-gtk3? Sidebars in GTK apps look awesome but gnome tweaks and geary would look better with blur.

@SVTA-OP It is working on some GTK-3 applications with adw-gtk3 right now, like lollypop. But styles should be implemented for each applications as gtk3 doesn't provide a standard sidebar that can be used in all applications like libadwaita

It now works on both geary and gnome tweak too

I am unable to get the blur effect. It's just a dark translucent background, but the blur effect is missing. Please tell me how to fix it.

I am unable to get the blur effect. It's just a dark translucent background, but the blur effect is missing. Please tell me how to fix it.

Enable blur all by default

I am unable to get the blur effect. It's just a dark translucent background, but the blur effect is missing. Please tell me how to fix it.

Enable blur all by default

Thanks that worked beautifully.

I have been using this for weeks and it's great! Is there a way to adjust the opacity?

You can change it in the Blur my shell extension settings, but you can't change the blur part opacity.

I have been using this for weeks and it's great! Is there a way to adjust the opacity?

@dylankird On line 11 and line 76, 0.8 is the opacity. Change them to the number you want. Both of them should be equal though...

Thanks so much! I found that 0.85 works a bit better for me.

I really appreciate you updating this, by the way. I see you have made a bunch of changes since I first started using this

You're welcome! I'm glad you liked it :)

Thanks so much! I found that 0.85 works a bit better for me.

I really appreciate you updating this, by the way. I see you have made a bunch of changes since I first started using this

Hello, just for your information: with the coming Blur-my-Shell v60 for GNOME 46 (which I will probably backport to GNOME 45), you should not be using the "No artefacts" option in the preference if you don't really need it, as the applications blur really has been improved and this option degrades the GNOME performances a lot!

It will be disabled automatically if you enabled it before this update, but I say it in the case somebody decides to simply enable this option without testing without it before :)

@aunetx Hi, thank you for the hard work on this great extension and all the improvements. And thank you for informing us here :)

Thank you so much for the CSS, you should make an style for Gradience. ❤️

for me it woking, but why the background are dark?

@rahimgg-github You probably have an extensions that creates a layer above your desktop. Something like Desktop Icon NG. What is it though?

@taiwbi thanks I didn't notice that, but still can't find a solution for trying to redraw the window

Screencast.from.2024-04-19.18-23-41.mp4