diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index b832fc750..8f7a7031d 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -129,7 +129,7 @@ define([
                 this.txtKnit, this.txtLeather, this.txtBrownPaper, this.txtPapyrus, this.txtWood];
 
             this.fillControls = [];
-            this.gradientColorsStr="";
+            this.gradientColorsStr="#000, #fff";
             this.typeGradient = 90 ;
             this.render();
         },
@@ -468,9 +468,13 @@ define([
                 rawData = record;
             }
 
-            this.typeGradient = rawData.type + 90;
-
-            (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
+            if (this.GradFillType === Asc.c_oAscFillGradType.GRAD_LINEAR) {
+                this.GradLinearDirectionType = rawData.type;
+                this.typeGradient = rawData.type + 90;
+            } else {
+                this.GradRadialDirectionIdx = 0;
+                this.typeGradient = rawData.type;
+            }
             if (this.api) {
                 if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
                     this.numGradientAngle.setValue(rawData.type, true);
@@ -1223,13 +1227,13 @@ define([
 
         btnDirectionRedraw: function(slider, gradientColorsStr) {
             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 + ')'});
-                });
+            _.each(this._viewDataLinear, function(item){
+                item.gradientColorsStr = gradientColorsStr;
+            });
+            this._viewDataRadial.gradientColorsStr = this.gradientColorsStr;
+            this.mnuDirectionPicker.store.each(function(item){
+                item.set('gradientColorsStr', gradientColorsStr);
+            }, this);
 
             if (this.typeGradient == -1)
                 this.btnDirection.$icon.css({'background': 'none'});
@@ -1397,9 +1401,12 @@ define([
                 { type:270, subtype:3},
                 { type:225, subtype:7}
             ];
+            _.each(this._viewDataLinear, function(item){
+                item.gradientColorsStr = me.gradientColorsStr;
+            });
 
             this._viewDataRadial = [
-                { type:2, subtype:5}
+                { type:2, subtype:5, gradientColorsStr: this.gradientColorsStr}
             ];
 
             this.btnDirection = new Common.UI.Button({
@@ -1424,8 +1431,8 @@ define([
                     allowScrollbar: false,
                     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,<%= gradientColorsStr %>)'
+                        +' <%} else {%> radial-gradient(<%= gradientColorsStr %>) <%}%>;"></div>')
                 });
             });
             this.btnDirection.render($('#shape-button-direction'));
diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js
index 236a161b8..3d4167f10 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettings.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettings.js
@@ -448,8 +448,13 @@ define([
                 rawData = record;
             }
 
-            this.typeGradient = rawData.type + 90;
-            (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
+            if (this.GradFillType === Asc.c_oAscFillGradType.GRAD_LINEAR) {
+                this.GradLinearDirectionType = rawData.type;
+                this.typeGradient = rawData.type + 90;
+            } else {
+                this.GradRadialDirectionIdx = 0;
+                this.typeGradient = rawData.type;
+            }
             if (this.api) {
                 if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
                     this.numGradientAngle.setValue(rawData.type, true);
@@ -536,13 +541,13 @@ define([
 
         btnDirectionRedraw: function(slider, gradientColorsStr) {
             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 + ')'});
-                });
+            _.each(this._viewDataLinear, function(item){
+                item.gradientColorsStr = gradientColorsStr;
+            });
+            this._viewDataRadial.gradientColorsStr = this.gradientColorsStr;
+            this.mnuDirectionPicker.store.each(function(item){
+                item.set('gradientColorsStr', gradientColorsStr);
+            }, this);
 
             if (this.typeGradient == -1)
                 this.btnDirection.$icon.css({'background': 'none'});
@@ -1302,9 +1307,12 @@ define([
                 { type:270, subtype:3},
                 { type:225, subtype:7}
             ];
+            _.each(this._viewDataLinear, function(item){
+                item.gradientColorsStr = me.gradientColorsStr;
+            });
 
             this._viewDataRadial = [
-                { type:2, subtype:5}
+                { type:2, subtype:5, gradientColorsStr: this.gradientColorsStr}
             ];
 
             this.btnDirection = new Common.UI.Button({
@@ -1328,8 +1336,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, ' + me.gradientColorsStr + ' )'
-                        +' <%} else {%> radial-gradient( ' + me.gradientColorsStr + ' 70%) <%}%>;"></div>')
+                        +'<% if(type!=2) {%>linear-gradient(<%= type + 90 %>deg,<%= gradientColorsStr %>)'
+                        +' <%} else {%> radial-gradient(<%= gradientColorsStr %>) <%}%>;"></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 2b4005fdc..1bb821d15 100644
--- a/apps/presentationeditor/main/app/view/SlideSettings.js
+++ b/apps/presentationeditor/main/app/view/SlideSettings.js
@@ -110,7 +110,7 @@ define([
             this.textureNames = [this.txtCanvas, this.txtCarton, this.txtDarkFabric, this.txtGrain, this.txtGranite, this.txtGreyPaper,
                 this.txtKnit, this.txtLeather, this.txtBrownPaper, this.txtPapyrus, this.txtWood];
 
-            this.gradientColorsStr="";
+            this.gradientColorsStr="#000, #fff";
             this.typeGradient = 90;
 
             this.render();
@@ -519,8 +519,13 @@ define([
                 rawData = record;
             }
 
-            this.typeGradient = rawData.type + 90;
-            (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
+            if (this.GradFillType === Asc.c_oAscFillGradType.GRAD_LINEAR) {
+                this.GradLinearDirectionType = rawData.type;
+                this.typeGradient = rawData.type + 90;
+            } else {
+                this.GradRadialDirectionIdx = 0;
+                this.typeGradient = rawData.type;
+            }
             if (this.api) {
                 if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
                     this.numGradientAngle.setValue(rawData.type, true);
@@ -607,13 +612,13 @@ define([
 
         btnDirectionRedraw: function(slider, gradientColorsStr) {
             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 + ')'});
-                });
+            _.each(this._viewDataLinear, function(item){
+                item.gradientColorsStr = gradientColorsStr;
+            });
+            this._viewDataRadial.gradientColorsStr = this.gradientColorsStr;
+            this.mnuDirectionPicker.store.each(function(item){
+                item.set('gradientColorsStr', gradientColorsStr);
+            }, this);
 
             if (this.typeGradient == -1)
                 this.btnDirection.$icon.css({'background': 'none'});
@@ -799,9 +804,12 @@ define([
                 { type:270, subtype:3},
                 { type:225, subtype:7}
             ];
+            _.each(this._viewDataLinear, function(item){
+                item.gradientColorsStr = me.gradientColorsStr;
+            });
 
             this._viewDataRadial = [
-                { type:2, subtype:5}
+                { type:2, subtype:5, gradientColorsStr: this.gradientColorsStr}
             ];
 
             this.btnDirection = new Common.UI.Button({
@@ -825,8 +833,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,<%= gradientColorsStr %>)'
+                        +' <%} else {%> radial-gradient(<%= gradientColorsStr %>) <%}%>;"></div>')
                 });
             });
             this.btnDirection.render($('#slide-button-direction'));
diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js
index f6f58591e..690341383 100644
--- a/apps/spreadsheeteditor/main/app/view/CellSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js
@@ -92,7 +92,7 @@ define([
             this.GradColor = { values: [0, 100], colors: ['000000', 'ffffff'], currentIdx: 0};
 
             this.fillControls = [];
-            this.gradientColorsStr="";
+            this.gradientColorsStr="#000, #fff";
             this.typeGradient = 90;
 
             this.render();
@@ -242,6 +242,9 @@ define([
                 { offsetx: 50,  offsety: 100, type:270, subtype:3},
                 { offsetx: 100, offsety: 100, type:225, subtype:7}
             ];
+            _.each(this._viewDataLinear, function(item){
+                item.gradientColorsStr = me.gradientColorsStr;
+            });
 
             this.btnDirection = new Common.UI.Button({
                 cls         : 'btn-large-dataview',
@@ -263,7 +266,8 @@ define([
                     parentMenu: btn.menu,
                     restoreHeight: 174,
                     store: new Common.UI.DataViewStore(me._viewDataLinear),
-                    itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" ></div>')
+                    itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background: '
+                        +'linear-gradient(<%= type + 90 %>deg,<%= gradientColorsStr %>);"></div>')
                 });
             });
             this.btnDirection.render($('#cell-button-direction'));
@@ -1080,15 +1084,13 @@ define([
         },
 
         btnDirectionRedraw: function(slider, gradientColorsStr) {
-
             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 + ')'});
-                });
+            _.each(this._viewDataLinear, function(item){
+                item.gradientColorsStr = gradientColorsStr;
+            });
+            this.mnuDirectionPicker.store.each(function(item){
+                item.set('gradientColorsStr', gradientColorsStr);
+            }, this);
 
             if (this.typeGradient == -1)
                 this.btnDirection.$icon.css({'background': 'none'});
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
index 3cb0252cb..50ee3dfea 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
@@ -124,7 +124,7 @@ define([
                 this.txtKnit, this.txtLeather, this.txtBrownPaper, this.txtPapyrus, this.txtWood];
 
             this.fillControls = [];
-            this.gradientColorsStr="";
+            this.gradientColorsStr="#000, #fff";
             this.typeGradient = 90;
 
             this.render();
@@ -461,8 +461,13 @@ define([
                 rawData = record;
             }
 
-            this.typeGradient = rawData.type + 90;
-            (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
+            if (this.GradFillType === Asc.c_oAscFillGradType.GRAD_LINEAR) {
+                this.GradLinearDirectionType = rawData.type;
+                this.typeGradient = rawData.type + 90;
+            } else {
+                this.GradRadialDirectionIdx = 0;
+                this.typeGradient = rawData.type;
+            }
             if (this.api) {
                 if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
                     this.numGradientAngle.setValue(rawData.type, true);
@@ -1144,13 +1149,13 @@ define([
 
         btnDirectionRedraw: function(slider, gradientColorsStr) {
             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 + ')'});
-                });
+            _.each(this._viewDataLinear, function(item){
+                item.gradientColorsStr = gradientColorsStr;
+            });
+            this._viewDataRadial.gradientColorsStr = this.gradientColorsStr;
+            this.mnuDirectionPicker.store.each(function(item){
+                item.set('gradientColorsStr', gradientColorsStr);
+            }, this);
 
             if (this.typeGradient == -1)
                 this.btnDirection.$icon.css({'background': 'none'});
@@ -1318,9 +1323,12 @@ define([
                 { type:270, subtype:3},
                 { type:225, subtype:7}
             ];
+            _.each(this._viewDataLinear, function(item){
+                item.gradientColorsStr = me.gradientColorsStr;
+            });
 
             this._viewDataRadial = [
-                { type:2, subtype:5}
+                { type:2, subtype:5, gradientColorsStr: this.gradientColorsStr}
             ];
 
             this.btnDirection = new Common.UI.Button({
@@ -1344,8 +1352,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,<%= gradientColorsStr %>)'
+                        +' <%} else {%> radial-gradient(<%= gradientColorsStr %>) <%}%>;"></div>')
                 });
             });
             this.btnDirection.render($('#shape-button-direction'));