Reducing the Titlebar Height Gnome 3.16

In this tip ill show you how to reduce the title bar height in Gnome3. Gnome shipped with incredibly high vertically padded title bars which waste a lot of screen real estate. We can reduce the hight using a small bit of CSS code.

We don't need any special permissions to create this css file. We will do this with your local user account.

Example A before CSS


Example B before CSS


OK launch your favourite terminal. Then Type:

[james@Jadelinux ~]$ nano ~/.config/gtk-3.0/gtk.css

This will open a blank css file.


Now add this CSS Code to the blank file.

.header-bar.default-decoration {
     padding-top: 3px;
     padding-bottom: 3px;
     border: none;
     background-image: linear-gradient(to bottom,
                    shade(@theme_bg_color, 1.05),
                    shade(@theme_bg_color, 0.99));
box-shadow: inset 0 1px shade(@theme_bg_color, 1.4);

.header-bar.default-decoration .button.titlebutton {
     padding-top: 2px;
     padding-bottom: 2px;

You can download a pre-made CSS file Here and place it in ~/.config/


Now we need to restart Gnome Shell. Press and hold the Alt key and tap F2 then type r and hit enter.


As you can see we have reduced the size of the titlebar and removed that horrible Separating line.


Example A After CSS


Example B After CSS


Thank you for reading.