Skip to content

Instantly share code, notes, and snippets.

@taiwbi
Last active July 3, 2025 20:52
Show Gist options
  • Save taiwbi/0c33fa7afaa65d2a593e2f77fb3d4af6 to your computer and use it in GitHub Desktop.
Save taiwbi/0c33fa7afaa65d2a593e2f77fb3d4af6 to your computer and use it in GitHub Desktop.
Make Gnome applications sidebar semi-transparent, and add blur with Blur My Shell Extension if you want to
/* 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;
}
@Inderix
Copy link

Inderix commented Jun 24, 2025

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment