How to apply gradient background to GtkWidget in GTK3?

Question

Is it possible to use gradient as a background for generic GtkWidget?

Related question: How to change GtkWidget background in GTK3?

Answer 1

Sure you can!

Gtk3 allows for theming using CSS. Here's a quick example I threw together in Python:

#!/usr/bin/python3
from gi.repository import Gtk, Gdk

button = Gtk.Button("Click Me")
grid = Gtk.Grid()
grid.add(button)
window = Gtk.Window()
window.set_size_request(200, 50)
window.add(grid)

css_provider = Gtk.CssProvider()
css = """
 .button {
      background-image: -gtk-gradient (linear,
                                       left top,
       left bottom,
       from (#d0e4f7),
       color-stop (0.5, darker (#d0e4f7)),
       to (#fdffff));
    }
"""

css_provider.load_from_data(css.encode('UTF-8'))
screen = Gdk.Screen.get_default()
style_context = window.get_style_context()
style_context.add_provider_for_screen(screen, css_provider,
                                          Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)

window.connect('delete-event', Gtk.main_quit)
window.show_all()
Gtk.main()

Carlos Garnacho has a great article on GNOME Journal that gets into the specifics.