Howto set Wingpanel and Slingshot to be translucent

Do you like translucent/transparent theme? If so this guide is for you. Note: It have only been tested with elementary OS default elementary theme. Open the terminal and copy/paste;

io.elementary.code '~/.config/gtk-3.0/gtk.css'

Add the following to the file;

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

    
@define-color base_color #ffffff;
@define-color bg_color alpha (shade (@base_color, 0.96), 0.6);
@define-color bg_highlight_color shade (@bg_color, 1.4);
@define-color border_color alpha (#000, 0.25);
@define-color fg_color #969f9d;

You can adjust the transparency of the Wingpanel by change the 0.5 to 0.0 (transpancy) – 1.0 (Solid)

The Slingshots transparency you can adjust 0.6 likewise.

Logout and login to take affect.

Enjoy ^_^

Tested on: elementary OS 5.1.4

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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