diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index 63f43ad0f..e63d02333 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -407,12 +407,10 @@ define([
                 this.mnuDirectionPicker.restoreHeight = 174;
                 var record = this.mnuDirectionPicker.store.findWhere({type: this.GradLinearDirectionType});
                 this.mnuDirectionPicker.selectRecord(record, true);
-                if(record) {
-                    this.typeGradient = record.get('type') +90;
-                }
+                if(record)
+                    this.typeGradient = this.GradLinearDirectionType +90;
                 else
                     this.typeGradient= -1;
-
                 this.numGradientAngle.setValue(this.GradLinearDirectionType, true);
                 this.numGradientAngle.setDisabled(this._locked);
             } else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
@@ -421,7 +419,7 @@ define([
                 this.mnuDirectionPicker.restoreHeight = 58;
                 this.mnuDirectionPicker.selectByIndex(this.GradRadialDirectionIdx, true);
                 if (this.GradRadialDirectionIdx>=0)
-                    this.typeGradient = this._viewDataRadial[this.GradRadialDirectionIdx].type + 90;
+                    this.typeGradient = this._viewDataRadial[this.GradRadialDirectionIdx].type;
                 else
                     this.typeGradient= -1;
 
@@ -945,7 +943,7 @@ define([
                             var record = this.mnuDirectionPicker.store.findWhere({type: value});
                             this.mnuDirectionPicker.selectRecord(record, true);
                             if (record)
-                                this.typeGradient = record.get('type') + 90;
+                                this.typeGradient = value + 90;
                             else
                                 this.typeGradient= -1;
 
@@ -991,8 +989,9 @@ define([
 
                     me.gradientColorsStr= arrGrCollors.join(', ');
                     if (me.gradientColorsStr != "") {
-                        if(me.mnuDirectionPicker.dataViewItems.length==1)
+                        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;
@@ -1001,7 +1000,7 @@ define([
 
                         if(this.typeGradient == -1)
                             this.btnDirection.$icon.css({'background': 'none'});
-                        else if(this.typeGradient==92)
+                        else if(this.typeGradient==2)
                             this.btnDirection.$icon.css({'background': ('radial-gradient(' + me.gradientColorsStr + ')')});
                         else
                             this.btnDirection.$icon.css({
diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js
index 6479b17a7..e98bcc6b1 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettings.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettings.js
@@ -121,6 +121,8 @@ define([
                 this.txtKnit, this.txtLeather, this.txtBrownPaper, this.txtPapyrus, this.txtWood];
 
             this.fillControls = [];
+            this.gradientColorsStr="";
+            this.typeGradient = 0 ;
 
             this.render();
 
@@ -390,10 +392,10 @@ define([
                 this.mnuDirectionPicker.restoreHeight = 174;
                 var record = this.mnuDirectionPicker.store.findWhere({type: this.GradLinearDirectionType});
                 this.mnuDirectionPicker.selectRecord(record, true);
-                if (record)
-                    this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
+                if(record)
+                    this.typeGradient = this.GradLinearDirectionType +90;
                 else
-                    this.btnDirection.setIconCls('');
+                    this.typeGradient= -1;
                 this.numGradientAngle.setValue(this.GradLinearDirectionType, true);
                 this.numGradientAngle.setDisabled(this._locked);
             } else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
@@ -402,9 +404,9 @@ define([
                 this.mnuDirectionPicker.restoreHeight = 58;
                 this.mnuDirectionPicker.selectByIndex(this.GradRadialDirectionIdx, true);
                 if (this.GradRadialDirectionIdx>=0)
-                    this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls);
+                    this.typeGradient = this._viewDataRadial[this.GradRadialDirectionIdx].type;
                 else
-                    this.btnDirection.setIconCls('');
+                    this.typeGradient= -1;
                 this.numGradientAngle.setValue(0, true);
                 this.numGradientAngle.setDisabled(true);
             }
@@ -443,7 +445,7 @@ define([
                 rawData = record;
             }
 
-            this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls);
+            this.typeGradient = rawData.type + 90;
             (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
             if (this.api) {
                 if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
@@ -842,7 +844,7 @@ define([
                             this.onGradTypeSelect(this.cmbGradType, rec.attributes);
                         } else {
                             this.cmbGradType.setValue('');
-                            this.btnDirection.setIconCls('');
+                            this.typeGradient = -1;
                         }
                         this._state.GradFillType = this.GradFillType;
                     }
@@ -854,9 +856,9 @@ define([
                             var record = this.mnuDirectionPicker.store.findWhere({type: value});
                             this.mnuDirectionPicker.selectRecord(record, true);
                             if (record)
-                                this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
+                                this.typeGradient = value + 90;
                             else
-                                this.btnDirection.setIconCls('');
+                                this.typeGradient= -1;
                             this.numGradientAngle.setValue(value, true);
                         }
                     } else
@@ -889,10 +891,35 @@ define([
                             me.GradColor.values[index] = position;
                         }
                     });
+
+                    var arrGrCollors=[];
+                    var scale=(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR)?1:0.7;
                     for (var index=0; index<length; index++) {
                         me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index);
                         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 + ')')
+                            });
+                    }
+
                     if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
                         me.GradColor.currentIdx = 0;
                     }
@@ -1266,7 +1293,7 @@ define([
 
             this.btnDirection = new Common.UI.Button({
                 cls         : 'btn-large-dataview',
-                iconCls     : 'item-gradient gradient-left',
+                iconCls     : 'item-gradient',
                 menu        : new Common.UI.Menu({
                     style: 'min-width: 60px;',
                     menuAlign: 'tr-br',
diff --git a/apps/presentationeditor/main/app/view/SlideSettings.js b/apps/presentationeditor/main/app/view/SlideSettings.js
index f52c916d6..15a9f37c8 100644
--- a/apps/presentationeditor/main/app/view/SlideSettings.js
+++ b/apps/presentationeditor/main/app/view/SlideSettings.js
@@ -110,6 +110,9 @@ 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.typeGradient = 0 ;
+
             this.render();
 
             var me = this;
@@ -463,10 +466,10 @@ define([
                 this.mnuDirectionPicker.restoreHeight = 174;
                 var record = this.mnuDirectionPicker.store.findWhere({type: this.GradLinearDirectionType});
                 this.mnuDirectionPicker.selectRecord(record, true);
-                if (record)
-                    this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
+                if(record)
+                    this.typeGradient = this.GradLinearDirectionType +90;
                 else
-                    this.btnDirection.setIconCls('');
+                    this.typeGradient= -1;
                 this.numGradientAngle.setValue(this.GradLinearDirectionType, true);
                 this.numGradientAngle.setDisabled(this._locked.background);
             } else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
@@ -475,9 +478,9 @@ define([
                 this.mnuDirectionPicker.restoreHeight = 58;
                 this.mnuDirectionPicker.selectByIndex(this.GradRadialDirectionIdx, true);
                 if (this.GradRadialDirectionIdx>=0)
-                    this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls);
+                    this.typeGradient = this._viewDataRadial[this.GradRadialDirectionIdx].type;
                 else
-                    this.btnDirection.setIconCls('');
+                    this.typeGradient= -1;
                 this.numGradientAngle.setValue(0, true);
                 this.numGradientAngle.setDisabled(true);
             }
@@ -516,7 +519,7 @@ define([
                 rawData = record;
             }
 
-            this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls);
+            this.typeGradient = rawData.type + 90;
             (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
             if (this.api) {
                 if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
@@ -1193,7 +1196,7 @@ define([
                             this.onGradTypeSelect(this.cmbGradType, rec.attributes);
                         } else {
                             this.cmbGradType.setValue('');
-                            this.btnDirection.setIconCls('');
+                            this.typeGradient = -1;
                         }
                         this._state.GradFillType = this.GradFillType;
                     }
@@ -1205,9 +1208,9 @@ define([
                             var record = this.mnuDirectionPicker.store.findWhere({type: value});
                             this.mnuDirectionPicker.selectRecord(record, true);
                             if (record)
-                                this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
+                                this.typeGradient = value + 90;
                             else
-                                this.btnDirection.setIconCls('');
+                                this.typeGradient= -1;
                             this.numGradientAngle.setValue(value, true);
                         }
                     } else
@@ -1240,9 +1243,33 @@ define([
                             me.GradColor.values[index] = position;
                         }
                     });
+
+                    var arrGrCollors=[];
+                    var scale=(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR)?1:0.7;
                     for (var index=0; index<length; index++) {
                         me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index);
                         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 + ')')
+                            });
                     }
                     if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
                         me.GradColor.currentIdx = 0;
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
index da203e13b..77248a28f 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
@@ -122,6 +122,8 @@ define([
                 this.txtKnit, this.txtLeather, this.txtBrownPaper, this.txtPapyrus, this.txtWood];
 
             this.fillControls = [];
+            this.gradientColorsStr="";
+            this.typeGradient = 0 ;
 
             this.render();
 
@@ -402,10 +404,10 @@ define([
                 this.mnuDirectionPicker.restoreHeight = 174;
                 var record = this.mnuDirectionPicker.store.findWhere({type: this.GradLinearDirectionType});
                 this.mnuDirectionPicker.selectRecord(record, true);
-                if (record)
-                    this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
+                if(record)
+                    this.typeGradient = this.GradLinearDirectionType +90;
                 else
-                    this.btnDirection.setIconCls('');
+                    this.typeGradient= -1;
                 this.numGradientAngle.setValue(this.GradLinearDirectionType, true);
                 this.numGradientAngle.setDisabled(this._locked);
             } else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
@@ -414,9 +416,9 @@ define([
                 this.mnuDirectionPicker.restoreHeight = 58;
                 this.mnuDirectionPicker.selectByIndex(this.GradRadialDirectionIdx, true);
                 if (this.GradRadialDirectionIdx>=0)
-                    this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls);
+                    this.typeGradient = this._viewDataRadial[this.GradRadialDirectionIdx].type;
                 else
-                    this.btnDirection.setIconCls('');
+                    this.typeGradient= -1;
                 this.numGradientAngle.setValue(0, true);
                 this.numGradientAngle.setDisabled(true);
             }
@@ -456,7 +458,7 @@ define([
                 rawData = record;
             }
 
-            this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls);
+            this.typeGradient = rawData.type + 90;
             (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
             if (this.api) {
                 if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
@@ -866,7 +868,7 @@ define([
                             this.onGradTypeSelect(this.cmbGradType, rec.attributes);
                         } else {
                             this.cmbGradType.setValue('');
-                            this.btnDirection.setIconCls('');
+                            this.typeGradient = -1;
                         }
                         this._state.GradFillType = this.GradFillType;
                     }
@@ -878,9 +880,9 @@ define([
                             var record = this.mnuDirectionPicker.store.findWhere({type: value});
                             this.mnuDirectionPicker.selectRecord(record, true);
                             if (record)
-                                this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
+                                this.typeGradient = value + 90;
                             else
-                                this.btnDirection.setIconCls('');
+                                this.typeGradient= -1;
                             this.numGradientAngle.setValue(value, true);
                         }
                     } else
@@ -913,9 +915,32 @@ define([
                             me.GradColor.values[index] = position;
                         }
                     });
+                    var arrGrCollors=[];
+                    var scale=(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR)?1:0.7;
                     for (var index=0; index<length; index++) {
                         me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index);
                         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 + ')')
+                            });
                     }
                     if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
                         me.GradColor.currentIdx = 0;