diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index 9e56ed570..e9922cef7 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -986,27 +986,7 @@ 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.model.get('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;
@@ -1220,6 +1200,28 @@ define([
             }
         },
 
+        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.model.get('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 + ')')
+                });
+        },
+
         createDelayedControls: function() {
             var me = this;
 
diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js
index 34e88cd0e..ce0947876 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettings.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettings.js
@@ -929,7 +929,6 @@ define([
                         me.sldrGradient.setValue(index, me.GradColor.values[index]);
                         arrGrCollors.push(me.sldrGradient.getColorValue(index)+ ' '+ me.sldrGradient.getValue(index)*scale +'%');
                     }
-
                     this.btnDirectionRedraw(me.sldrGradient, arrGrCollors.join(', '));
 
                     if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
diff --git a/apps/presentationeditor/main/app/view/SlideSettings.js b/apps/presentationeditor/main/app/view/SlideSettings.js
index cf3e8672d..b2f7cb9e9 100644
--- a/apps/presentationeditor/main/app/view/SlideSettings.js
+++ b/apps/presentationeditor/main/app/view/SlideSettings.js
@@ -600,7 +600,6 @@ define([
             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;
diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js
index 92ac88154..a79be80ee 100644
--- a/apps/spreadsheeteditor/main/app/view/CellSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js
@@ -943,24 +943,7 @@ define([
                             me.sldrGradient.setValue(index, me.GradColor.values[index]);
                             arrGrCollors.push(me.sldrGradient.getColorValue(index)+ ' '+ me.sldrGradient.getValue(index) +'%');
                         }
-
-                        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.model.get('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
-                                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 >= me.GradColor.colors.length) {
                             me.GradColor.currentIdx = 0;
@@ -1093,6 +1076,28 @@ define([
             }
         },
 
+        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.model.get('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 + ')')
+                });
+        },
+
         UpdateThemeColors: function() {
              if (!this.borderColor) {
                 // create color buttons
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
index c737aab48..cadaa4747 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
@@ -922,26 +922,8 @@ define([
                         me.sldrGradient.setValue(index, me.GradColor.values[index]);
                         arrGrCollors.push(me.sldrGradient.getColorValue(index)+ ' '+ me.sldrGradient.getValue(index)*scale +'%');
                     }
+                    this.btnDirectionRedraw(me.sldrGradient, arrGrCollors.join(', '));
 
-                    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.model.get('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 + ')')
-                            });
-                    }
                     if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
                         me.GradColor.currentIdx = 0;
                     }
@@ -1156,6 +1138,28 @@ define([
             }
         },
 
+        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.model.get('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 + ')')
+                });
+        },
+
         createDelayedControls: function() {
             var me = this;