4

How do I control all window drop/box shadows? Gnome themes seem to have different size shadows so I assume it is possible.

Here's what I have tried:

  1. Editing the gtk.css at "~/.config/gtk-3.0/gtk.css" by adding:

    .window-frame {box-shadow: none;}
.window-frame:backdrop {box-shadow: none;}

  2. I added the same css to a copy of a downloaded theme installed in "~/.themes/" - this had no .window-frame class so I added it.

  3. I added the same css as well as one of the default themes (Albatross) copied out of "/usr/share/themes/" - this had a .window-frame class in "gtk-widgets.css" so I modified it.

I restarted Gnome shell after each. Attempts 1 and 2 did nothing. Attempt 3 did get rid of the shadows but also seemed to affect refresh in applications - text scrolling doesn't refresh.

--

Specs: Ubuntu 18.04 with Gnome/Mutter

Improve this question

2 Answers 2

Reset to default
4

The solution to this is to edit the "gtk.css" in whatever theme you are using - themes do control the drop/box shadow. I've tested this on Ubuntu 18.04. You can edit the default at "~/.config/gtk-3.0/gtk.css" or, a much better idea, you can edit your own installed theme, even if that's a copy of the default theme. Install your theme in your home directory "~/.themes/" folder and then find the "gtk.css" file in it's "gtk-3.0" folder. Open the file in a text editor and search for "decoration" and "decoration:backdrop". To remove the windows shadow comment out the box-shadow line and add your own set to "none" like so:

decoration
{
    border-radius: 6px 6px 0 0;
    border-width: 0px;
    /*box-shadow: 1px 12px 12px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.18);*/
    box-shadow: none;
    margin: 4px;
}

decoration:backdrop
{
    border-radius: 6px 6px 0 0;
    border-width: 0px;
    /*box-shadow: 1px 12px 12px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.18);*/
    box-shadow: none;
    margin: 4px;
}

Save the file. In Settings > Appearance you'll need to load the theme - if you were already using it change the them to another theme and then change it back to your theme again. Windows should now have no shadows - see image below.

enter image description here

Improve this answer
2
  • 1
    You could likely "group" those two selectors (separated by comma) so you don't have to duplicate the declarations? decoration, decoration:backdrop { ... declarations just once ... }
    – Levente
    Jan 25, 2021 at 1:47
  • @Levente as they are in this post yes good point. I left them separately because I was still adjusting them in different ways to see how they worked.
    – garrettlynchirl
    Jun 14, 2021 at 11:40
0

We can always enable GTK Inspector (gsettings set org.gtk.Settings.Debug enable-inspector-keybinding true) and look under the hood.

Here's my ~/.config/gtk-3.0/gtk.css

window decoration, window paned, window paned headerbar {
/* square top corners */
    border-radius: 0;
}

window paned headerbar
{
/* header top shadow */
    box-shadow: none;
}   

window decoration
{
/* Remove shadows */
    box-shadow: none;
/* window border */
    border: 1px solid silver;
}

enter image description here

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .