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 Headerbar */
overlay-split-view revealer.raised.top-bar {
  background: alpha(@window_bg_color, 0);
  box-shadow: none;
}

overlay-split-view headerbar.titlebar {
  background: transparent;
  border: none;
  box-shadow: none;
}

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

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

/* Global style */
.content-pane {
  background: @view_bg_color;
}

widget.background.overview {
  background: transparent;
}

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

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

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

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

window>deck>grid>headerbar.titlebar {
  background: linear-gradient(90deg,
      transparent 0%,
      transparent 220px,
      @headerbar_shade_color 221px,
      @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;
}

/* BkackBox Terminal */
#blackbox-main-window {
  background-color: transparent;
  /* Unless transparency won't work */
}

#blackbox-main-window headerbar {
  background-color: rgba(20, 21, 35, 0.85);
}

/* Ghostty terminal */
window.terminal-window {
  background: transparent;
}

window.terminal-window .top-bar {
  background: alpha(#1e1e2e, 0.8);
}

window.terminal-window .top-bar windowhandle {
  background: transparent;
}

/* GNOME Text Editor */
dialog-host>widget>widget>toolbarview>stack>tabview>widget>page>box>overlay>box>scrolledwindow>textview.editor.view {
  background: alpha(@window_bg_color, 0);
}

dialog-host>widget>widget>toolbarview>stack>tabview>widget>page>box>overlay>box>scrolledwindow>textview.editor.view>border,
dialog-host>widget>widget>toolbarview>stack>tabview>widget>page>box>overlay>box>scrolledwindow>textview.editor.view>border>gutter,
dialog-host>widget>widget>toolbarview>stack>tabview>widget>page>box>overlay>box>scrolledwindow>textview.editor.view>border {
  background: transparent;
}

In fact this was all I needed:

.nautilus-window {
  background: transparent;
}

.content-pane, .undershoot-top.undershoot-bottom {
  background: white;
}

.sidebar-pane {
  background: transparent;
}

Now I have:

(using blur my shell for testing, it looks normal in real life)

And:

In my opinion this is more consistent :-)

gnome browser?

or proyect is died?

Is it possible to blur Gnome Text Editor?

Is it possible to blur Gnome Text Editor?

@Infiniti151 It is.

Add this to end of the CSS file and use blur my shell to blur it:

.org-gnome-TextEditor textview.editor, .org-gnome-TextEditor textview.editor * {
  background: transparent;
}

Is it possible to blur Gnome Text Editor?

@Infiniti151 It is.

Add this to end of the CSS file and use blur my shell to blur it:

.org-gnome-TextEditor textview.editor, .org-gnome-TextEditor textview.editor * {
  background: transparent;
}

Thanks! That worked great. The only problem I'm seeing is the color of selected text also became transparent. I can see the selected text in the overview map, but not in the editor. How to change that color? Also found out another issue that the context menu inside the editor is transparent as well

@Infiniti151 Sorry, my bad. Here is the correct snippet:

.org-gnome-TextEditor textview.editor, .org-gnome-TextEditor textview.editor gutter, .org-gnome-TextEditor textview.editor border {
  background: transparent;
}

@Infiniti151 Sorry, my bad. Here is the correct snippet:

.org-gnome-TextEditor textview.editor, .org-gnome-TextEditor textview.editor gutter, .org-gnome-TextEditor textview.editor border {
  background: transparent;
}

Worked perfectly! Thanks

any ideas to make this work with Flatpaks?
I've tried setting the gtk-4.0 and gtk-3.0 folders using Flatseal but I've had no dice with it