diff --git a/apps/common/main/lib/component/HSBColorPicker.js b/apps/common/main/lib/component/HSBColorPicker.js
index eb2fa03caa..438ef17292 100644
--- a/apps/common/main/lib/component/HSBColorPicker.js
+++ b/apps/common/main/lib/component/HSBColorPicker.js
@@ -118,8 +118,11 @@ define([
                     }
                 }
 
-                if (areaSatBrightness.length>0)
-                    areaSatBrightness.css('background-color', new Common.Utils.RGBColor('hsb('+hueVal+', 100, 100)').toHex());
+                if (areaSatBrightness.length>0) {
+                    var fillColor = new Common.Utils.RGBColor('hsb(' + hueVal + ', 100, 100)');
+                    var background = 'linear-gradient(rgba(255,255,255,0), #000), linear-gradient(-90deg,' + fillColor.toRGB() + ','+ fillColor.toRGBA(0) +'), linear-gradient(#fff, #fff)';
+                    areaSatBrightness.css('background', background);
+                }
 
                 if (previewColorText.length>0)
                     previewColorText[0].innerHTML = (me.color == 'transparent') ? me.textNoColor : me.color.toUpperCase();
diff --git a/apps/common/main/resources/less/hsb-colorpicker.less b/apps/common/main/resources/less/hsb-colorpicker.less
index f6a6d9115a..113891faaf 100644
--- a/apps/common/main/resources/less/hsb-colorpicker.less
+++ b/apps/common/main/resources/less/hsb-colorpicker.less
@@ -35,7 +35,7 @@
         width: 195px;
         height: 196px;
         position: relative;
-        background-position: 0 0;
+        background-image: none;
     }
 
     .cnt-root {
@@ -51,7 +51,7 @@
         position: relative;
         border: @scaled-one-px-value-ie solid @border-regular-control-ie;
         border: @scaled-one-px-value solid @border-regular-control;
-        background-position: -196px 0;
+        background: linear-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
     }
 
     .cnt-hb-arrow {