diff --git a/runtime/doc/gui_x11.txt b/runtime/doc/gui_x11.txt
index 778c8873d..77cb7b725 100644
--- a/runtime/doc/gui_x11.txt
+++ b/runtime/doc/gui_x11.txt
@@ -354,7 +354,8 @@ to the GTK documentation, however little there is, on how to do this.
 See http://developer.gnome.org/doc/API/2.0/gtk/gtk-Resource-Files.html
 for more information.
 
-						*gtk-tooltip-colors*
+Tooltip Colors						*gtk-tooltip-colors*
+
 Example, which sets the tooltip colors to black on light-yellow: >
 
 	style "tooltips"
@@ -372,12 +373,117 @@ distribution.
 For GTK+ 3, an effect similar to the above can be obtained by adding the
 following snippet of CSS code to $XDG_HOME_DIR/gtk-3.0/gtk.css (usually,
 $HOME/.config/gtk-3.0/gtk.css):
- >
+
+For GTK+ 3 < 3.20: >
+
 	.tooltip {
 		background-color: #ffffcc;
 		color: #000000;
 	}
 <
+For GTK+ 3 >= 3.20: >
+
+	tooltip {
+	    background-color: #ffffcc;
+	    text-shadow: none;
+	}
+
+	tooltip label {
+	    color: #2e3436;
+	}
+<
+A Quick Look at GTK+ CSS					*gtk-css*
+
+The contents of this subsection apply to GTK+ 3.20 or later which provides
+stable support for GTK+ CSS:
+
+	https://developer.gnome.org/gtk3/stable/theming.html
+
+GTK+ uses CSS for styling and layout of widgets.  In this subsection, we'll
+have a quick look at GTK+ CSS through simple, illustrative examples.
+
+Example 1.  Empty Space Adjustment
+
+By default, the toolbar and the tabline of the GTK+ 3 GUI are somewhat larger
+than those of the GTK+ 2 GUI.  Some people may want to make them look similar
+to the GTK+ 2 GUI in size.
+
+To do that, we'll try reducing empty space around icons and labels that looks
+apparently superfluous.
+
+Add the following lines to $XDG_HOME_DIR/gtk-3.0/gtk.css (usually,
+$HOME/.config/gtk-3.0/gtk.css): >
+
+	toolbar button {
+	    margin-top: -2px;
+	    margin-right: 0px;
+	    margin-bottom: -2px;
+	    margin-left: 0px;
+
+	    padding-top: 0px;
+	    padding-right: 0px;
+	    padding-bottom: 0px;
+	    padding-left: 0px
+	}
+
+	notebook tab {
+	    margin-top: -1px;
+	    margin-right: 3px;
+	    margin-bottom: -1px;
+	    margin-left: 3px;
+
+	    padding-top: 0px;
+	    padding-right: 0px;
+	    padding-bottom: 0px;
+	    padding-left: 0px
+	}
+<
+Since it's a CSS, they can be rewritten using shorthand: >
+
+	toolbar button {
+	    margin: -2px 0px;
+	    padding: 0px;
+	}
+
+	notebook tab {
+	    margin: -1px 3px;
+	    padding: 0px
+	}
+<
+Note: You might want to use 'toolbariconsize' to adjust the icon size, too.
+
+Note: Depending on the icon theme and/or the font in use, some extra tweaks
+may be needed for a satisfactory result.
+
+Note: In addition to margin and padding, you can use border.  For details,
+refer to the box model of CSS, e.g.,
+
+	https://www.w3schools.com/css/css_boxmodel.asp
+
+Example 2.  More Than Just Colors
+
+GTK+ CSS supports gradients as well: >
+
+	tooltip {
+	    background-image: -gtk-gradient(linear,
+					    0 0, 0 1,
+					    color-stop(0, #344752),
+					    color-stop(0.5, #546772),
+					    color-stop(1, #243742));
+	}
+
+	tooltip label {
+	    color: #f3f3f3;
+	}
+<
+Gradients can be used to make a GUI element visually distinguishable from
+others without relying on high contrast. Accordingly, effective use of them is
+a useful technique to give a theme a sense of unity in color and luminance.
+
+Note: Theming can be difficult since it must make every application look
+equally good; making a single application more charming often gets others
+unexpectedly less attractive or even deteriorates their usability.  Keep this
+in mind always when you try improving a theme.
 
 Using Vim as a GTK+ plugin				*gui-gtk-socketid*