diff --git a/doc/manual.html b/doc/manual.html
index 01c9998..1973ba3 100644
--- a/doc/manual.html
+++ b/doc/manual.html
@@ -288,14 +288,13 @@ task_active_background_id = 2
 systray_background_id = 0
 clock_background_id = 0
 </code></pre>
-<p>Identifier 0 refers to a special background which is fully transparent, identifier 1 applies the first background defined in the config file etc.</p><h3 id="gradients">Gradients<a name="gradients" href="#gradients" class="md2man-permalink" title="permalink"></a></h3><p>(Available since 0.13.0)</p><p>Most of the panel elements that accept backgrounds also allow specifying
-one or more gradient layers that are drawn on top of the solid color
-background.</p><p>First the user must define one or more gradients in the config file,
-each starting with <code>gradient = TYPE</code>. These should be added
-ideally after backgrounds but before all the other options.</p><p>Then gradients can be added by index to elements, using <code>*_gradient_id = INDEX</code>,
-where <code>*</code> is an element name, for example <code>panel</code>, and <code>INDEX</code> is
-the gradient index, starting from 1. The <code>*_gradient_id</code> option can be repeated
-for the same element, which results in multiple gradients
+<p>Identifier 0 refers to a special background which is fully transparent, identifier 1 applies the first background defined in the config file etc.</p><h3 id="gradients">Gradients<a name="gradients" href="#gradients" class="md2man-permalink" title="permalink"></a></h3><p>(Available since 0.13.0)</p><p>Backgrounds also allow specifying one or more gradient layers
+that are drawn on top of the solid color background.</p><p>First the user must define one or more gradients in the config file,
+each starting with <code>gradient = TYPE</code>. These must be added before backgrounds.</p><p>Then gradients can be added by index to backgrounds,
+using the <code>gradient_id = INDEX</code>, <code>hover_gradient_id = INDEX</code> and
+<code>pressed_gradient_id = INDEX</code>, where <code>INDEX</code> is
+the gradient index, starting from 1. The <code>*gradient_id</code> option can be repeated
+for the same background, which results in multiple gradients
 being drawn on top of each other in the given order.</p><h4 id="simple-gradients">Simple gradients<a name="simple-gradients" href="#simple-gradients" class="md2man-permalink" title="permalink"></a></h4><p>These are gradients that vary from fixed control points (top-to-bottom, left-to-right
 or center-to-corners). The user must specify the start and end colors,
 and can optionally add extra color stops in between.</p><h5 id="vertical-gradient-with-color-varying-from-the-top-edge-to-the-bottom-edge-two-colors">Vertical gradient, with color varying from the top edge to the bottom edge, two colors<a name="vertical-gradient-with-color-varying-from-the-top-edge-to-the-bottom-edge-two-colors" href="#vertical-gradient-with-color-varying-from-the-top-edge-to-the-bottom-edge-two-colors" class="md2man-permalink" title="permalink"></a></h5><pre class="highlight plaintext"><code>gradient = vertical
@@ -407,9 +406,21 @@ gradient = horizontal
 start_color = #111111 100
 end_color = #222222 100
 
-[....]
+# Background 1: Active desktop name
+rounded = 2
+border_width = 1
+border_sides = TBLR
+background_color = #555555 10
+border_color = #ffffff 60
+background_color_hover = #555555 10
+border_color_hover = #ffffff 60
+background_color_pressed = #555555 10
+border_color_pressed = #ffffff 60
+gradient_id = 3
+hover_gradient_id = 4
+pressed_gradient_id = 2
 
-panel_gradient_id = 5
+[...]
 </code></pre>
 <h3 id="panel">Panel<a name="panel" href="#panel" class="md2man-permalink" title="permalink"></a></h3>
 <ul>
diff --git a/doc/tint2.1 b/doc/tint2.1
index 00f28ce..0acdaea 100644
--- a/doc/tint2.1
+++ b/doc/tint2.1
@@ -179,18 +179,17 @@ Identifier 0 refers to a special background which is fully transparent, identifi
 .PP
 (Available since 0.13.0)
 .PP
-Most of the panel elements that accept backgrounds also allow specifying
-one or more gradient layers that are drawn on top of the solid color
-background.
+Backgrounds also allow specifying one or more gradient layers
+that are drawn on top of the solid color background.
 .PP
 First the user must define one or more gradients in the config file,
-each starting with \fB\fCgradient = TYPE\fR\&. These should be added
-ideally after backgrounds but before all the other options.
+each starting with \fB\fCgradient = TYPE\fR\&. These must be added before backgrounds.
 .PP
-Then gradients can be added by index to elements, using \fB\fC*_gradient_id = INDEX\fR,
-where \fB\fC*\fR is an element name, for example \fB\fCpanel\fR, and \fB\fCINDEX\fR is
-the gradient index, starting from 1. The \fB\fC*_gradient_id\fR option can be repeated
-for the same element, which results in multiple gradients
+Then gradients can be added by index to backgrounds,
+using the \fB\fCgradient_id = INDEX\fR, \fB\fChover_gradient_id = INDEX\fR and
+\fB\fCpressed_gradient_id = INDEX\fR, where \fB\fCINDEX\fR is
+the gradient index, starting from 1. The \fB\fC*gradient_id\fR option can be repeated
+for the same background, which results in multiple gradients
 being drawn on top of each other in the given order.
 .SS Simple gradients
 .PP
@@ -352,9 +351,21 @@ gradient = horizontal
 start_color = #111111 100
 end_color = #222222 100
 
-[....]
+# Background 1: Active desktop name
+rounded = 2
+border_width = 1
+border_sides = TBLR
+background_color = #555555 10
+border_color = #ffffff 60
+background_color_hover = #555555 10
+border_color_hover = #ffffff 60
+background_color_pressed = #555555 10
+border_color_pressed = #ffffff 60
+gradient_id = 3
+hover_gradient_id = 4
+pressed_gradient_id = 2
 
-panel_gradient_id = 5
+[...]
 .fi
 .RE
 .SS Panel
diff --git a/doc/tint2.md b/doc/tint2.md
index a7deff5..65ed198 100644
--- a/doc/tint2.md
+++ b/doc/tint2.md
@@ -142,18 +142,17 @@ Identifier 0 refers to a special background which is fully transparent, identifi
 
 (Available since 0.13.0)
 
-Most of the panel elements that accept backgrounds also allow specifying
-one or more gradient layers that are drawn on top of the solid color
-background.
+Backgrounds also allow specifying one or more gradient layers
+that are drawn on top of the solid color background.
 
 First the user must define one or more gradients in the config file,
-each starting with `gradient = TYPE`. These should be added
-ideally after backgrounds but before all the other options.
+each starting with `gradient = TYPE`. These must be added before backgrounds.
 
-Then gradients can be added by index to elements, using `*_gradient_id = INDEX`,
-where `*` is an element name, for example `panel`, and `INDEX` is
-the gradient index, starting from 1. The `*_gradient_id` option can be repeated
-for the same element, which results in multiple gradients
+Then gradients can be added by index to backgrounds,
+using the `gradient_id = INDEX`, `hover_gradient_id = INDEX` and
+`pressed_gradient_id = INDEX`, where `INDEX` is
+the gradient index, starting from 1. The `*gradient_id` option can be repeated
+for the same background, which results in multiple gradients
 being drawn on top of each other in the given order.
 
 #### Simple gradients
@@ -310,9 +309,21 @@ gradient = horizontal
 start_color = #111111 100
 end_color = #222222 100
 
-[....]
+# Background 1: Active desktop name
+rounded = 2
+border_width = 1
+border_sides = TBLR
+background_color = #555555 10
+border_color = #ffffff 60
+background_color_hover = #555555 10
+border_color_hover = #ffffff 60
+background_color_pressed = #555555 10
+border_color_pressed = #ffffff 60
+gradient_id = 3
+hover_gradient_id = 4
+pressed_gradient_id = 2
 
-panel_gradient_id = 5
+[...]
 ```
 
 ### Panel