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;
}

/* Rhythmbox */
window box:nth-child(2) paned:nth-child(3) paned:nth-child(3) box:nth-child(2) {
  background: @window_bg_color;
}

window box:nth-child(2) paned:nth-child(3) box:first-child paned grid .sidebar-toolbar,
window box:nth-child(2) paned:nth-child(3) box:first-child paned grid .sidebar-toolbar button {
  background: transparent;
}

window box toolbar {
  background: transparent; /* Comment this if you don't want transparency on rhythmbox topbar */
}

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

Is it possible for you to add support for Rhythmbox sidebar? Thanks in advance!

@Karol739 I will try to convince myself to do that but lollypop is a great music player and transparent sidebar already works with it

@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

@rahimgg-github I'm honestly not sure. Update "blur my shell" extension to the latest version, if didn't work, try the "No Artifact" setting. It shouldn't be necessary though

@Karol739 DONE!