gtk windows with alpha channels

I decided to engage in some blingineering today, and put together a self contained demo of how to make a semi-transparent window (ie with an alpha channel) using GTK+. For this, you will need GTK+ 2.8 or higher, Cairo, a modern X server and a running compositing manager. Any very recent Linux distro should meet the bill, I’m using SUSE 10.1.

And here is the heavily commented source code (python version).

This stuff should be documented in the GTK+ manual proper I guess, but hopefully Google will see this and it’ll go into the global pool of knowledge along with everything else. There are still a couple of problems:

  • It’s not clear to me how to detect if a compositor is running or not. I guess there should be (maybe is) a simple X property on the root window you can check to see if one is running. Until we fix that it’s hard to use this technique in production software because people not running a compositing manager will see a black background instead of a transparent one.
  • There should be a more convenient API in GTK+ for this, gtk_window_set_translucent() or something. Maybe we need a SexyWindow class, Christian?
About these ads

15 Responses to “gtk windows with alpha channels”

  1. Isak Says:

    The “how to detect if a compositing manager is running” was discussed on xdg a while ago. See this thread:

    AFAIK, nothing was agreed on though :-(

  2. MacSlow Says:

    Hi Mike!

    You’ll maybe also like to take a look at some code I wrote a couple of weeks ago not only offering decoration-less and transparent windows, but also input-shape support. Take a look at it here:

    There’s the code:

    And also a screencast of it in action:

    Btw, that circular redish thing looks familiar ;)

    Best regards…


  3. Ray Strode Says:

    Metacity’s compositor takes ownership of the CM_Sn selections (where n is 0 to the number of screens).

    You can just watch that to see when when a compositing manager becomes available or unavailable.

  4. desrt Says:

    Your code appears to have a small bug.

    If you switch from a alpha-supporting display to a non-alpha-supporting display then the supports_alpha boolean never gets set back to FALSE.

  5. Mike Says:

    MacSlow, I put links to our demos on the Cairo page, and linked to your work in a new blog entry. Great stuff there, you should definitely be on planet gnome!

  6. MacSlow Says:

    Thanks, Mike! Well, being on p.g.o would sure be something :)

    Best regards…


  7. Christian Kellner Says:

    Yeah, I hope that stuff goes directly into gtk! I have also written that kind of code for gnome-launch-box ( a while ago. And also a gdk_screen_has_compositor () or something would be ueber-useful.

  8. Evan Martin Says:

    See also . (Or Google for “ghosd” if your blog strips out links…)

  9. Evan Martin Says:

    See also . (Or Google for “ghosd” if your blog strips out links…)

    Sorry for the double-post. Typo. :)

  10. Raul Z.T. Says:

    Hi , great job , i was exactly looking HOW TO use alpha channels , so , if isnt too much to ask , dont you have the same code in perl? I am actually using perl-Gtk :)

    Thanks lot man!

  11. bersace Says:


    Do you plan to implement a nice gtk engine base on your cairo trick in order to have translucent windows background ? Couple with beryl and emerald, this might allow us to mimic Vista Aero Glass. I don’t mean a want a gratis Vista Aero Glass, the point is the technical challenge. It’s up to us to use it nicely. (ex. beryl use heavily effect to provide consistency and accessibility to the desktop).

    Keep up the good work !


  12. sayan801 Says:

    I was trying this code to add transparency to a widget. In this code i have added a drawing area as a child of Window and drawn the shape in drawing area. But the drawing area was having black background. Could anyone tell me how to make that drawing area transparent.

  13. vicentemundim Says:


    I’ve manage to translate your code to Ruby/GTK, and it works well too!

    I was looking for a way to create a custom tooltip to be displayed next to a StatusIcon (in the system tray) and this code give me many highlights on it. Thank you very much.

    The code can be checked here (I’ve kept the comments in it, hope you don’t mind):


  14. fooshee Says:

    … and here’s a Perl version :)


  15. Madison Documentation Project: Tutorials Says:

    [...] windows with alpha channels and Cairo [EXAMPLE] [...]

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your 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 )

Google+ photo

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

Connecting to %s


Get every new post delivered to your Inbox.

%d bloggers like this: