diff --git a/apps/spreadsheeteditor/main/app/template/ShapeSettings.template b/apps/spreadsheeteditor/main/app/template/ShapeSettings.template
index a3d435a03..1bca1a8a5 100644
--- a/apps/spreadsheeteditor/main/app/template/ShapeSettings.template
+++ b/apps/spreadsheeteditor/main/app/template/ShapeSettings.template
@@ -66,7 +66,22 @@
                 <div style="display: inline-block; margin-top: 3px;">
                     <div id="shape-slider-gradient" style="display: inline-block; vertical-align: middle;"></div>
                 </div>
-                <div id="shape-gradient-color-btn" style="display: inline-block;float: right;"></div>
+                <div style="height: 40px;margin-top:6px;display:flex;justify-content:space-between;">
+                    <div style="display: flex;">
+                    <div style="">
+                        <label class="input-label" style=""><%= scope.strColor %></label>
+                        <div id="shape-gradient-color-btn"></div>
+                    </div>
+                    <div style="margin-left: 10px;">
+                        <label class="input-label" style=""><%= scope.textPosition %></label>
+                        <div id="shape-gradient-position"></div>
+                    </div>
+                    </div>
+                    <div style="display:flex;padding-top:15px;">
+                        <div id="shape-gradient-add-step"></div>
+                        <div id="shape-gradient-remove-step"></div>
+                    </div>
+                </div>
             </div>
         </td>
     </tr>
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
index 10f66d9d8..2a83bf776 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
@@ -910,6 +910,9 @@ define([
                         me.GradColor.currentIdx = 0;
                     }
                     me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
+
+                    this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]);
+
                     this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
                     this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
                     this.BGColor = {Value: 1, Color: 'ffffff'};
@@ -1284,7 +1287,7 @@ define([
 
             this.sldrGradient = new Common.UI.MultiSliderGradient({
                 el: $('#shape-slider-gradient'),
-                width: 125,
+                width: 192,
                 minValue: 0,
                 maxValue: 100,
                 values: [0, 100]
@@ -1296,6 +1299,8 @@ define([
                 var color = me.GradColor.colors[me.GradColor.currentIdx];
                 me.btnGradColor.setColor(color);
                 me.colorsGrad.select(color,false);
+                var pos = me.GradColor.values[me.GradColor.currentIdx];
+                me.spnGradPosition.setValue(pos, true);
             });
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
@@ -1324,6 +1329,41 @@ define([
             });
             this.fillControls.push(this.sldrGradient);
 
+            this.spnGradPosition = new Common.UI.MetricSpinner({
+                el: $('#shape-gradient-position'),
+                step: 1,
+                width: 60,
+                defaultUnit : "%",
+                value: '50 %',
+                allowDecimal: false,
+                maxValue: 100,
+                minValue: 0,
+                disabled: this._locked
+            });
+            this.lockedControls.push(this.spnGradPosition);
+            this.spnGradPosition.on('change', _.bind(this.onPositionChange, this));
+            this.spnGradPosition.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);});
+
+            this.btnAddGradientStep = new Common.UI.Button({
+                parentEl: $('#shape-gradient-add-step'),
+                cls: 'btn-toolbar',
+                iconCls: 'toolbar__icon btn-add-breakpoint',
+                disabled: this._locked,
+                hint: this.tipAddGradientPoint,
+            });
+            this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this));
+            this.lockedControls.push(this.btnAddGradientStep);
+
+            this.btnRemoveGradientStep = new Common.UI.Button({
+                parentEl: $('#shape-gradient-remove-step'),
+                cls: 'btn-toolbar',
+                iconCls: 'toolbar__icon btn-remove-breakpoint',
+                disabled: this._locked,
+                hint: this.tipRemoveGradientPoint
+            });
+            this.btnRemoveGradientStep.on('click', _.bind(this.onRemoveGradientStep, this));
+            this.lockedControls.push(this.btnRemoveGradientStep);
+
             this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
                 el: $('#shape-combo-border-size'),
                 style: "width: 93px;",
@@ -1717,6 +1757,50 @@ define([
             }
         },
 
+        onPositionChange: function(btn) {
+            var pos = btn.getNumberValue();
+            if (this.api) {
+                this.GradColor.values[this.GradColor.currentIdx] = pos;
+                var props = new Asc.asc_CShapeProperty();
+                var fill = new Asc.asc_CShapeFill();
+                fill.asc_putType(Asc.c_oAscFill.FILL_TYPE_GRAD);
+                fill.asc_putFill( new Asc.asc_CFillGrad());
+                fill.asc_getFill().asc_putGradType(this.GradFillType);
+                var arr = [];
+                this.GradColor.values.forEach(function(item){
+                    arr.push(item*1000);
+                });
+                fill.asc_getFill().asc_putPositions(arr);
+                props.asc_putFill(fill);
+                this.imgprops.asc_putShapeProperties(props);
+                this.api.asc_setGraphicObjectProps(this.imgprops);
+            }
+        },
+
+        onAddGradientStep: function() {
+            var curIndex = this.GradColor.currentIdx;
+            var pos = (this.GradColor.values[curIndex] + this.GradColor.values[curIndex < this.GradColor.colors.length - 1 ? curIndex + 1 : curIndex - 1]) / 2;
+
+            this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex];
+            this.GradColor.currentIdx = this.GradColor.colors.length - 1;
+            this.sldrGradient.addNewThumb(undefined, undefined, pos, curIndex);
+
+            this.sldrGradient.trigger('change', this.sldrGradient);
+            this.sldrGradient.trigger('changecomplete', this.sldrGradient);
+        },
+
+        onRemoveGradientStep: function() {
+            if (this.GradColor.values.length < 3) return;
+            this.GradColor.values.splice(this.GradColor.currentIdx, 1);
+            this.sldrGradient.removeThumb(this.GradColor.currentIdx);
+            if (_.isUndefined(this.GradColor.currentIdx) || this.GradColor.currentIdx >= this.GradColor.colors.length) {
+                this.GradColor.currentIdx = 0;
+            }
+            this.sldrGradient.setActiveThumb(this.GradColor.currentIdx);
+            this.sldrGradient.trigger('change', this.sldrGradient);
+            this.sldrGradient.trigger('changecomplete', this.sldrGradient);
+        },
+
         txtNoBorders            : 'No Line',
         strStroke               : 'Stroke',
         strColor                : 'Color',
@@ -1767,6 +1851,9 @@ define([
         textHintFlipH: 'Flip Horizontally',
         strShadow: 'Show shadow',
         textFromStorage: 'From Storage',
-        textSelectImage: 'Select Picture'
+        textSelectImage: 'Select Picture',
+        textPosition: 'Position',
+        tipAddGradientPoint: 'Add gradient point',
+        tipRemoveGradientPoint: 'Remove gradient point'
     }, SSE.Views.ShapeSettings || {}));
 });
diff --git a/apps/spreadsheeteditor/main/locale/en.json b/apps/spreadsheeteditor/main/locale/en.json
index 28eac6ba0..dfefbc6e1 100644
--- a/apps/spreadsheeteditor/main/locale/en.json
+++ b/apps/spreadsheeteditor/main/locale/en.json
@@ -2200,6 +2200,9 @@
   "SSE.Views.ShapeSettings.txtWood": "Wood",
   "SSE.Views.ShapeSettings.textFromStorage": "From Storage",
   "SSE.Views.ShapeSettings.textSelectImage": "Select Picture",
+  "SSE.Views.ShapeSettings.textPosition": "Position",
+  "SSE.Views.ShapeSettings.tipAddGradientPoint": "Add gradient point",
+  "SSE.Views.ShapeSettings.tipRemoveGradientPoint": "Remove gradient point",
   "SSE.Views.ShapeSettingsAdvanced.strColumns": "Columns",
   "SSE.Views.ShapeSettingsAdvanced.strMargins": "Text Padding",
   "SSE.Views.ShapeSettingsAdvanced.textAbsolute": "Don't move or size with cells",