diff --git a/themes/original/css/theme_right.css.php b/themes/original/css/theme_right.css.php
index 9c4f394d3..9f944e84c 100644
--- a/themes/original/css/theme_right.css.php
+++ b/themes/original/css/theme_right.css.php
@@ -1446,7 +1446,8 @@ table#serverconnection_trg_local  {
     -moz-border-radius: 11px;
     -webkit-border-radius: 11px;
     border-radius: 11px;
-    background-image: url(./themes/original/img/gradient.svg);
+    background-image: url(./themes/svg_gradient.php?from=ffffff&to=cccccc);
+    background-size: 100% 100%;
     background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc));
     background: -moz-linear-gradient(top,  #ffffff,  #cccccc);
     background: -o-linear-gradient(top,  #ffffff,  #cccccc);
diff --git a/themes/original/img/gradient.svg b/themes/original/img/gradient.svg
deleted file mode 100644
index 1bb079abf..000000000
--- a/themes/original/img/gradient.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<?xml version="1.0" ?>
-<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.0" width="100%" height="100%"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-
-    <defs>
-    <linearGradient id="myLinearGradient1"
-                    x1="0%" y1="0%"
-                    x2="0%" y2="100%"
-                    spreadMethod="pad">
-        <stop offset="0%"   stop-color="#ffffff" stop-opacity="1"/>
-        <stop offset="100%" stop-color="#cccccc" stop-opacity="1"/>
-    </linearGradient>
-    </defs>
-
-    <rect width="100%" height="100%"
-          style="fill:url(#myLinearGradient1);" />
-</svg>
diff --git a/themes/pmahomme/css/theme_left.css.php b/themes/pmahomme/css/theme_left.css.php
index 5016cb11b..467e70a25 100644
--- a/themes/pmahomme/css/theme_left.css.php
+++ b/themes/pmahomme/css/theme_left.css.php
@@ -206,7 +206,8 @@ div#left_tableList li {
 #newtable a {
     display: block;
     padding: 1px;
-    background-image: url(./themes/pmahomme/img/gradient.svg);
+    background-image: url(./themes/svg_gradient.php?from=ffffff&to=cccccc);
+    background-size: 100% 100%;
     background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc));
     background: -moz-linear-gradient(top,  #ffffff,  #cccccc);
     background: -o-linear-gradient(top,  #ffffff,  #cccccc);
@@ -222,7 +223,8 @@ div#left_tableList li {
 }
 
 #newtable a:hover {
-    background-image: url(./themes/pmahomme/img/gradient-hover.svg);
+    background-image: url(./themes/svg_gradient.php?from=cccccc&to=dddddd);
+    background-size: 100% 100%;
     background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#dddddd)) !important;
     background: -moz-linear-gradient(top,  #cccccc,  #dddddd) !important;
     background: -o-linear-gradient(top,  #cccccc,  #dddddd) !important;
diff --git a/themes/pmahomme/css/theme_right.css.php b/themes/pmahomme/css/theme_right.css.php
index ee47b1650..2107354a0 100644
--- a/themes/pmahomme/css/theme_right.css.php
+++ b/themes/pmahomme/css/theme_right.css.php
@@ -105,7 +105,8 @@ a:hover {
     -moz-border-radius:5px;
     -webkit-border-radius:5px;
     border-radius:5px;
-    background-image: url(./themes/pmahomme/img/gradient.svg);
+    background-image: url(./themes/svg_gradient.php?from=ffffff&to=cccccc);
+    background-size: 100% 100%;
     background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc));
     background: -moz-linear-gradient(top,  #ffffff,  #cccccc);
     background: -o-linear-gradient(top,  #ffffff,  #cccccc);
@@ -125,7 +126,8 @@ th {
     font-weight:        bold;
     color:              <?php echo $GLOBALS['cfg']['ThColor']; ?>;
     background:         #f3f3f3;
-    background-image: url(./themes/pmahomme/img/gradient.svg);
+    background-image: url(./themes/svg_gradient.php?from=ffffff&to=cccccc);
+    background-size: 100% 100%;
     background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc));
     background: -moz-linear-gradient(top,  #ffffff,  #cccccc);
     background: -o-linear-gradient(top,  #ffffff,  #cccccc);
@@ -198,7 +200,8 @@ input[type=submit]{
 
 	text-shadow: 0px 1px 0px #fff;
 
-    background-image: url(./themes/pmahomme/img/gradient.svg);
+    background-image: url(./themes/svg_gradient.php?from=ffffff&to=cccccc);
+    background-size: 100% 100%;
     background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc));
     background: -moz-linear-gradient(top,  #ffffff,  #cccccc);
     background: -o-linear-gradient(top,  #ffffff,  #cccccc);
@@ -206,7 +209,8 @@ input[type=submit]{
 }
 
 input[type=submit]:hover{	position: relative;
-    background-image: url(./themes/pmahomme/img/gradient-hover.svg);
+    background-image: url(./themes/svg_gradient.php?from=cccccc&to=dddddd);
+    background-size: 100% 100%;
     background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#dddddd));
     background: -moz-linear-gradient(top,  #cccccc,  #dddddd);
     background: -o-linear-gradient(top,  #cccccc,  #dddddd);
@@ -1330,14 +1334,16 @@ div#querywindowcontainer fieldset {
 	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
 	text-shadow: #fff 0px 1px 0px;
     */
-    background-image: url(./themes/pmahomme/img/gradient.svg);
+    background-image: url(./themes/svg_gradient.php?from=ffffff&to=cccccc);
+    background-size: 100% 100%;
     background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc));
     background: -moz-linear-gradient(top,  #ffffff,  #cccccc);
     background: -o-linear-gradient(top,  #ffffff,  #cccccc);
     <?php echo PMA_ieFilter('#ffffff', '#cccccc'); ?>
 }
 #sectionlinks a:hover, #statuslinks a:hover{
-    background-image: url(./themes/pmahomme/img/gradient-hover.svg);
+    background-image: url(./themes/svg_gradient.php?from=cccccc&to=dddddd);
+    background-size: 100% 100%;
     background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#dddddd));
     background: -moz-linear-gradient(top,  #cccccc,  #dddddd);
     background: -o-linear-gradient(top,  #cccccc,  #dddddd);
@@ -1771,7 +1777,8 @@ table#serverconnection_trg_local  {
 
 	text-shadow: 0px 1px 0px #fff;
 
-    background-image: url(./themes/pmahomme/img/gradient.svg);
+    background-image: url(./themes/svg_gradient.php?from=ffffff&to=cccccc);
+    background-size: 100% 100%;
     background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc));
     background: -moz-linear-gradient(top,  #ffffff,  #cccccc);
     background: -o-linear-gradient(top,  #ffffff,  #cccccc);
@@ -1779,7 +1786,8 @@ table#serverconnection_trg_local  {
     cursor: pointer;
 }
 #buttonGo:hover{
-    background-image: url(./themes/pmahomme/img/gradient-hover.svg);
+    background-image: url(./themes/svg_gradient.php?from=cccccc&to=dddddd);
+    background-size: 100% 100%;
     background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#dddddd));
     background: -moz-linear-gradient(top,  #cccccc,  #dddddd);
     background: -o-linear-gradient(top,  #cccccc,  #dddddd);
diff --git a/themes/pmahomme/img/gradient-hover.svg b/themes/pmahomme/img/gradient-hover.svg
deleted file mode 100644
index c10af7b55..000000000
--- a/themes/pmahomme/img/gradient-hover.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<?xml version="1.0" ?>
-<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.0" width="100%" height="100%"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-
-    <defs>
-    <linearGradient id="myLinearGradient1"
-                    x1="0%" y1="0%"
-                    x2="0%" y2="100%"
-                    spreadMethod="pad">
-        <stop offset="0%"   stop-color="#cccccc" stop-opacity="1"/>
-        <stop offset="100%" stop-color="#dddddd" stop-opacity="1"/>
-    </linearGradient>
-    </defs>
-
-    <rect width="100%" height="100%"
-          style="fill:url(#myLinearGradient1);" />
-</svg>
diff --git a/themes/pmahomme/img/gradient.svg b/themes/pmahomme/img/gradient.svg
deleted file mode 100644
index 1bb079abf..000000000
--- a/themes/pmahomme/img/gradient.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<?xml version="1.0" ?>
-<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.0" width="100%" height="100%"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-
-    <defs>
-    <linearGradient id="myLinearGradient1"
-                    x1="0%" y1="0%"
-                    x2="0%" y2="100%"
-                    spreadMethod="pad">
-        <stop offset="0%"   stop-color="#ffffff" stop-opacity="1"/>
-        <stop offset="100%" stop-color="#cccccc" stop-opacity="1"/>
-    </linearGradient>
-    </defs>
-
-    <rect width="100%" height="100%"
-          style="fill:url(#myLinearGradient1);" />
-</svg>
diff --git a/themes/svg_gradient.php b/themes/svg_gradient.php
new file mode 100644
index 000000000..a5d89c61a
--- /dev/null
+++ b/themes/svg_gradient.php
@@ -0,0 +1,25 @@
+<?php
+header('Content-Type: image/svg+xml');
+header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 3600) . ' GMT');
+
+function get_color($get_name, $default)
+{
+    // get color from GET args, only alphanumeric chcracters
+    $opts = array('options' => array('regexp' => '/^[a-z0-9]+$/i'));
+    $color = filter_input(INPUT_GET, $get_name, FILTER_VALIDATE_REGEXP, $opts);
+    if (preg_match('/^[a-f0-9]{6}$/', $color)) {
+        return '#' . $color;
+    }
+    return $color ? $color : $default;
+}
+?>
+<?php echo '<?xml version="1.0" ?>' ?>
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.0" width="100%" height="100%">
+    <defs>
+        <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" stop-color="<?php echo get_color('from', 'white') ?>" stop-opacity="1" />
+            <stop offset="100%" stop-color="<?php echo get_color('to', 'black') ?>" stop-opacity="1" />
+        </linearGradient>
+    </defs>
+    <rect width="100%" height="100%" style="fill:url(#linear-gradient);" />
+</svg>