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

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!

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"

how to get blur on right context menu and titlebar

how to get blur on right context menu and titlebar

@kprabhat248 Using this awesome work of art: https://github.com/aunetx/blur-my-shell

Thanks for this, looks beautiful on swayfx.
The only thing I don't like is when the nautilus window gets small and the sidebar is hidden, the whole window goes transparent. Is there any way to change this? I think it would be more consistent if the main section is always opaque and only the sidebar goes transparent.
I think it's because content-pane doesn't exist in this mode.

Any help appreciated :-)

Update: here is some CSS that works well for my use case. The only thing I can't work out is why the header goes transparent when not focused

.nautilus-window {
  background: transparent;
}

.content-pane, gridview {
  background: white;
}

.sidebar-pane {
  background: transparent;
}

.nautilus-window > dialog-host > widget > widget > widget > toastoverlay > overlay-split-view > widget > toolbarview > .top-bar > windowhandle > .collapse-spacing {
  background: alpha(white, 1);
}

.bottom-bar {
  background: alpha(white, 1);
}

Result:

• Full size
  (see below)

• Small size
  (see below)

• Small size, not focused -- why is the header transparent?
  (see below)

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