I am referring to the effect eg. the session indicator has or the keyboard language adder has. I'd prefer it with the responsiveness the session listbox has.

enter image description here

2 Answers 2


The most common way a designer can do this is by applying on an upper layer a semitransparent png image or gradient with fading transparency from 1 to 0 and white color. Another option is a gtk box shadow with white color.

edit: I believe this is what are you looking for:

ctl+shft+d dev tool

The style is into gtk-widgets.css, line 3840

popover undershoot.top {
        @bg_color 0%,
        alpha(@bg_color, 0) 50%


  • Sure, but is this how it's done properly by elemenetary? I mean, I examined the source code of the session indicator but I couldn't find anything like it.
    – user258456
    Jan 27, 2020 at 17:23
  • It is more like a style than the code and probably you can find this not into session indicator code but in elementary os theme. Look at my answer again
    – Bo rislav
    Jan 27, 2020 at 17:44
  • That was exactly what I was looking for. Thanks!
    – user258456
    Jan 28, 2020 at 0:50
  • that is super helpful! However for me @bg_color didn't work, but @theme_bg_color did. It may be because i'm not on elementary OS, but just using plain gtk. Jun 28, 2020 at 6:20
  • 1
    It is just a variable name that for sure could be different depending on the gtk theme. It can be safely replaced with any hexadecimal color value like #ffffff or #000 or even web colors like red, or white for example.
    – Bo rislav
    Jun 28, 2020 at 8:56

Gtk.ScrolledWindow is what you're looking for. It comes with everything you see in the screenshot you added: the vertical scroll bar to the right, the blue hue animations when reaching the top or the bottom of the list...

Basically, I suggest creating a Gtk.ListBox, populate it with whatever widgets you might need, and then add it to a Gtk.ScrolledWindow. Then, add the Gtk.ScrollerWindow to whatever container you need it to appear into. It will most likely inherit the container's width and height, and try to display the ListBox's contents as pretty as possible. Using a ListBox will also allow you to easily implement filtering of it's contents, if needed. I can supply an example here if you're interested.

This a screenshot of the implementation linked above: enter image description here

  • That was not what I was looking for. I was looking for the fading, not the blue light.
    – user258456
    Jan 28, 2020 at 0:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.