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 */
}

/* Disks */
window>deck>box>leaflet>box:nth-child(3)>stack>statuspage>scrolledwindow>viewport.frame,
window>deck>box>leaflet>box:nth-child(3)>stack>scrolledwindow>viewport.frame {
  background: @window_bg_color;
}

window>deck>box>leaflet>box:nth-child(1)>scrolledwindow treeview.view {
  background: transparent;
}

window>deck>box>leaflet>box:nth-child(1)>headerbar.titlebar.windowhandle {
  background: transparent;
  border-bottom: none;
}

@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!

very good work and something Nautilus should adopt - thank you

Outstanding! You made Gnome 10x prettier.

Outstanding! You made Gnome 10x prettier.

Yeah but the frame rate drops when 5 windows are open and on top of each other

Outstanding! You made Gnome 10x prettier.

Yeah but the frame rate drops when 5 windows are open and on top of each other

If you want blur on GNOME, that's what you should pay for because mutter does not support background blur.

Rounded corners extension doesn't work when I set "Enabled all default"