diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js
index 7a77729d7..cec805653 100644
--- a/apps/common/main/lib/component/Slider.js
+++ b/apps/common/main/lib/component/Slider.js
@@ -316,6 +316,7 @@ define([
             me.delta = 100/(me.maxValue - me.minValue);
             me.includeSnap = me.options.includeSnap;
             me.intervalSnap = me.options.intervalSnap;
+            me.mouseFree = true;
             me.thumbs = [];
             if (me.options.el) {
                 me.render();
@@ -404,7 +405,7 @@ define([
 
                 $(document).off('mouseup', me.binding.onMouseUp);
                 $(document).off('mousemove', me.binding.onMouseMove);
-
+                me.mouseFree = true;
                 me._dragstart = undefined;
                 !me.isRemoveThumb && me.trigger('changecomplete', me, value, lastValue);
                 me.isRemoveThumb = undefined;
@@ -443,7 +444,7 @@ define([
 
             var onMouseDown = function (e) {
                 if ( me.disabled ) return;
-
+                me.mouseFree = false;
                 var index = e.data.index,
                     thumb = me.thumbs[index].thumb;
 
diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index e63d02333..53391fbeb 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -127,7 +127,7 @@ define([
 
             this.fillControls = [];
             this.gradientColorsStr="";
-            this.typeGradient = 0 ;
+            this.typeGradient = 90 ;
             this.render();
         },
 
diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js
index e98bcc6b1..5da359ca0 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettings.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettings.js
@@ -121,8 +121,8 @@ define([
                 this.txtKnit, this.txtLeather, this.txtBrownPaper, this.txtPapyrus, this.txtWood];
 
             this.fillControls = [];
-            this.gradientColorsStr="";
-            this.typeGradient = 0 ;
+            this.gradientColorsStr = "#000, #fff";
+            this.typeGradient = 90 ;
 
             this.render();
 
@@ -520,9 +520,39 @@ define([
                 this.api.setEndPointHistory();
                 this._gradientApplyFunc();
             }
+
+            var arrGrCollors=[];
+            var scale=(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR)?1:0.7;
+            for (var index=0; index < slider.thumbs.length; index++) {
+                arrGrCollors.push(slider.getColorValue(index)+ ' '+ slider.getValue(index)*scale +'%');
+            }
+
+            this.btnDirectionRedraw(slider, arrGrCollors.join(', '));
             this._sendUndoPoint = true;
         },
 
+        btnDirectionRedraw: function(slider, gradientColorsStr) {
+            if(!slider.mouseFree) return;
+
+            this.gradientColorsStr = gradientColorsStr;
+            if (this.mnuDirectionPicker.dataViewItems.length == 1)
+                this.mnuDirectionPicker.dataViewItems[0].$el.children(0).css({'background': 'radial-gradient(' + gradientColorsStr + ')'});
+            else
+                this.mnuDirectionPicker.dataViewItems.forEach(function (item) {
+                    var type = item.options.model.attributes.type + 90;
+                    item.$el.children(0).css({'background': 'linear-gradient(' + type + 'deg, ' + gradientColorsStr + ')'});
+                });
+
+            if (this.typeGradient == -1)
+                this.btnDirection.$icon.css({'background': 'none'});
+            else if (this.typeGradient == 2)
+                this.btnDirection.$icon.css({'background': ('radial-gradient(' + gradientColorsStr + ')')});
+            else
+                this.btnDirection.$icon.css({
+                    'background': ('linear-gradient(' + this.typeGradient + 'deg, ' + gradientColorsStr + ')')
+                });
+        },
+
         _gradientApplyFunc: function() {
             if (this._sliderChanged) {
                 var props = new Asc.asc_CShapeProperty();
@@ -900,25 +930,7 @@ define([
                         arrGrCollors.push(me.sldrGradient.getColorValue(index)+ ' '+ me.sldrGradient.getValue(index)*scale +'%');
                     }
 
-                    me.gradientColorsStr= arrGrCollors.join(', ');
-                    if (me.gradientColorsStr != "") {
-                        if(me.mnuDirectionPicker.dataViewItems.length==1)
-                            me.mnuDirectionPicker.dataViewItems[0].$el.children(0).css({'background': 'radial-gradient(' + me.gradientColorsStr + ')'});
-                        else
-                            me.mnuDirectionPicker.dataViewItems.forEach(function (item){
-                                var type = item.options.model.attributes.type+90;
-                                item.$el.children(0).css({'background': 'linear-gradient('+ type + 'deg, '+ me.gradientColorsStr + ')'});
-                            });
-
-                        if(this.typeGradient == -1)
-                            this.btnDirection.$icon.css({'background': 'none'});
-                        else if(this.typeGradient==2)
-                            this.btnDirection.$icon.css({'background': ('radial-gradient(' + me.gradientColorsStr + ')')});
-                        else
-                            this.btnDirection.$icon.css({
-                                'background': ('linear-gradient(' + this.typeGradient + 'deg, ' + me.gradientColorsStr + ')')
-                            });
-                    }
+                    this.btnDirectionRedraw(me.sldrGradient, arrGrCollors.join(', '));
 
                     if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
                         me.GradColor.currentIdx = 0;
@@ -1312,8 +1324,8 @@ define([
                     restoreHeight: 174,
                     store: new Common.UI.DataViewStore(me._viewDataLinear),
                     itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background: '
-                        +'<% if(type!=2) {%>linear-gradient(<%= type + 90 %>deg,#000, #fff)'
-                        +' <%} else {%> radial-gradient( #000 , #fff 70%) <%}%>;"></div>')
+                        +'<% if(type!=2) {%>linear-gradient(<%= type + 90 %>deg, ' + me.gradientColorsStr + ' )'
+                        +' <%} else {%> radial-gradient( ' + me.gradientColorsStr + ' 70%) <%}%>;"></div>')
                 });
             });
             this.btnDirection.render($('#shape-button-direction'));
diff --git a/apps/presentationeditor/main/app/view/SlideSettings.js b/apps/presentationeditor/main/app/view/SlideSettings.js
index 15a9f37c8..e397a522b 100644
--- a/apps/presentationeditor/main/app/view/SlideSettings.js
+++ b/apps/presentationeditor/main/app/view/SlideSettings.js
@@ -111,7 +111,7 @@ define([
                 this.txtKnit, this.txtLeather, this.txtBrownPaper, this.txtPapyrus, this.txtWood];
 
             this.gradientColorsStr="";
-            this.typeGradient = 0 ;
+            this.typeGradient = 90;
 
             this.render();
 
@@ -594,9 +594,41 @@ define([
                 this.api.setEndPointHistory();
                 this._gradientApplyFunc();
             }
+
+            var arrGrCollors=[];
+            var scale=(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR)?1:0.7;
+            for (var index=0; index < slider.thumbs.length; index++) {
+                arrGrCollors.push(slider.getColorValue(index)+ ' '+ slider.getValue(index)*scale +'%');
+            }
+
+            this.btnDirectionRedraw(slider, arrGrCollors.join(', '));
+
             this._sendUndoPoint = true;
         },
 
+        btnDirectionRedraw: function(slider, gradientColorsStr) {
+            if(!slider.mouseFree) return;
+
+
+            this.gradientColorsStr = gradientColorsStr;
+            if (this.mnuDirectionPicker.dataViewItems.length == 1)
+                this.mnuDirectionPicker.dataViewItems[0].$el.children(0).css({'background': 'radial-gradient(' + gradientColorsStr + ')'});
+            else
+                this.mnuDirectionPicker.dataViewItems.forEach(function (item) {
+                    var type = item.options.model.attributes.type + 90;
+                    item.$el.children(0).css({'background': 'linear-gradient(' + type + 'deg, ' + gradientColorsStr + ')'});
+                });
+
+            if (this.typeGradient == -1)
+                this.btnDirection.$icon.css({'background': 'none'});
+            else if (this.typeGradient == 2)
+                this.btnDirection.$icon.css({'background': ('radial-gradient(' + gradientColorsStr + ')')});
+            else
+                this.btnDirection.$icon.css({
+                    'background': ('linear-gradient(' + this.typeGradient + 'deg, ' + gradientColorsStr + ')')
+                });
+        },
+
         _gradientApplyFunc: function() {
             if (this._sliderChanged) {
                 var props = new Asc.CAscSlideProps();
@@ -1251,26 +1283,8 @@ define([
                         me.sldrGradient.setValue(index, me.GradColor.values[index]);
                         arrGrCollors.push(me.sldrGradient.getColorValue(index)+ ' '+ me.sldrGradient.getValue(index)*scale +'%');
                     }
-
-                    me.gradientColorsStr= arrGrCollors.join(', ');
-                    if (me.gradientColorsStr != "") {
-                        if(me.mnuDirectionPicker.dataViewItems.length==1)
-                            me.mnuDirectionPicker.dataViewItems[0].$el.children(0).css({'background': 'radial-gradient(' + me.gradientColorsStr + ')'});
-                        else
-                            me.mnuDirectionPicker.dataViewItems.forEach(function (item){
-                                var type = item.options.model.attributes.type+90;
-                                item.$el.children(0).css({'background': 'linear-gradient('+ type + 'deg, '+ me.gradientColorsStr + ')'});
-                            });
-
-                        if(this.typeGradient == -1)
-                            this.btnDirection.$icon.css({'background': 'none'});
-                        else if(this.typeGradient == 2)
-                            this.btnDirection.$icon.css({'background': ('radial-gradient(' + me.gradientColorsStr + ')')});
-                        else
-                            this.btnDirection.$icon.css({
-                                'background': ('linear-gradient(' + this.typeGradient + 'deg, ' + me.gradientColorsStr + ')')
-                            });
-                    }
+                    this.btnDirectionRedraw(me.sldrGradient, arrGrCollors.join(', '));
+                    
                     if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
                         me.GradColor.currentIdx = 0;
                     }
diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js
index ea2d477dd..96893a739 100644
--- a/apps/spreadsheeteditor/main/app/view/CellSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js
@@ -92,7 +92,7 @@ define([
 
             this.fillControls = [];
             this.gradientColorsStr="";
-            this.typeGradient = 0;
+            this.typeGradient = 90;
 
             this.render();
             this.createDelayedControls();
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
index 3cc34e0e1..2691552ac 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
@@ -123,7 +123,7 @@ define([
 
             this.fillControls = [];
             this.gradientColorsStr="";
-            this.typeGradient = 0;
+            this.typeGradient = 90;
 
             this.render();