Howto change the color/transparency of wingpanel

This guide shows you howto change the color of the wingpanel. If you wish to have different color than shown in this guide I suggest installing Gimp from the App Center to easily get the RBG numbers.

Open the terminal and copy/paste;

nano ~/.config/gtk-3.0/gtk.css

Insert the following;


* wingpanel support *


.panel {

    background-color: rgba(255,255,255,0.5);

    transition: all 1s ease-in-out;

.panel.maximized {

    background-color: rgba(255,255,255,0.5);

This will make your wingpanel white transparent. The 3 first number in RGBA is the color numbers. Use Gimp to find the color you want. If you want a black wingpanel, change all 255 with 0. The last number is how transparent the panel is going to be. It range from 0.0 (complete transparent) to 1.0 (Solid).

Save: [ctrl]+[o]

Exit: [ctrl]+[x]

When done type;

killall wingpanel

Enjoy! ^_^

Tested on: elementary OS 5.1.4 – 5.1.6


One thought on “Howto change the color/transparency of wingpanel

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s