Take the 2-minute tour ×

Applications such as Mozilla Firefox and Ubuntu Software Center are able to extend the title bar gradient down into their toolbar area. Example follows:

Screenshot illustrating the extended title bar effect in Ubuntu Unity

How can I achieve the same effect in my application?

share|improve this question
Make a gradient under your toolbar of the same color? –  Linuxios Dec 14 '12 at 4:32
The unity tag is for Microsoft Unity. Please don't misuse it. –  Lex Li Dec 15 '12 at 6:03

1 Answer 1

First, the two applications that you mention are built using different toolkits and technologies and thus employ different methods to do what you're willing to do. While Firefox uses XUL/GTK2, USC uses GTK3. I'll explain both approaches.

  1. Ubuntu Software Center is built using GTK3, and thus it's toolbar gradient is defined in the theme css file. The code that achieves this is

    /* primary-toolbar */
    .primary-toolbar .toolbar,
    .primary-toolbar.toolbar {
    -GtkWidget-window-dragging: true;
                                     from (shade (@dark_bg_color, 0.96)),
                                     to (shade (@dark_bg_color, 1.4)));
    border-bottom-color: shade (@dark_bg_color, 1.1);
    border-top-color: shade (@dark_bg_color, 1.09);
    border-style: solid;
    border-width: 1px 0 1px 0;
    color: @dark_fg_color;
    text-shadow: 0 -1px shade (@dark_bg_color, 0.7);
    box-shadow: inset 0 1px shade (@dark_bg_color, 0.94);

    In order to use this in your gtk3 application, you have to assign the class primary-toolbar to your toolbar. For appropriate documentation on that, check out here.

  2. Firefox is built using XUL and uses GTK2 to render the widgets on GNU/Linux distributions such as Ubuntu. The styling for the tab-bar of Firefox comes from the appearance definition of menubar as defined in the gtkrc file of the concerned theme. In the case of default theme Ambience, it is

    style "menubar" = "dark" {
      engine "murrine" {
        textstyle = 2
        text_shade = 0.33
        gradient_shades = {1.0, 1.0, 1.0, 1.0}
        lightborder_shade = 1.0

It is possible to achieve the effect in other toolkits with different methods, but it is recommended that you write your application in gtk3 so as to use native styling.

share|improve this answer
I'm using Qt - is there any way to call into GTK and retrieve the appropriate colors? –  Jake Petroules Dec 14 '12 at 8:43
When running under a gtk environment like Unity, Qt uses a theme renderer called Qgtkstyle, which uses the current gtk2 theme to render the widgets. If you try to use GtkStyleContext within your application, then you'll get an error that you can't run gtk2 and gtk3 within the same process. I found this link. Though it doesn't tell much, it hints at a solution that can be used, but it'll force you to style the whole application by hand. –  Gaurav Pareek Dec 14 '12 at 13:25
You could also do this. Spawn a child process before the application's initialization, and use it to get the properties through GtkStyleContext. Then use use these properties to draw a custom style for your toolbar. Please note I have no idea if you could actually do this in Qt, it's just a wild guess. –  Gaurav Pareek Dec 14 '12 at 13:30

Your Answer


