diff --git a/apps/documenteditor/main/app/template/ShapeSettings.template b/apps/documenteditor/main/app/template/ShapeSettings.template
index 1418afb3b..99941da61 100644
--- a/apps/documenteditor/main/app/template/ShapeSettings.template
+++ b/apps/documenteditor/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/documenteditor/main/app/template/TextArtSettings.template b/apps/documenteditor/main/app/template/TextArtSettings.template
index d64e7d07d..e4e8d61fe 100644
--- a/apps/documenteditor/main/app/template/TextArtSettings.template
+++ b/apps/documenteditor/main/app/template/TextArtSettings.template
@@ -44,7 +44,22 @@
                 <div style="display: inline-block; margin-top: 3px;">
                     <div id="textart-slider-gradient" style="display: inline-block; vertical-align: middle;"></div>
                 </div>
-                <div id="textart-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="textart-gradient-color-btn"></div>
+                    </div>
+                    <div style="margin-left: 10px;">
+                        <label class="input-label" style=""><%= scope.textPosition %></label>
+                        <div id="textart-gradient-position"></div>
+                    </div>
+                    </div>
+                    <div style="display:flex;padding-top:15px;">
+                        <div id="textart-gradient-add-step"></div>
+                        <div id="textart-gradient-remove-step"></div>
+                    </div>
+                </div>
             </div>
         </td>
     </tr>
diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index 8fd41e2e5..432af65c4 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -973,6 +973,7 @@ 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'};
@@ -1348,7 +1349,7 @@ define([
 
             this.sldrGradient = new Common.UI.MultiSliderGradient({
                 el: $('#shape-slider-gradient'),
-                width: 125,
+                width: 192,
                 minValue: 0,
                 maxValue: 100,
                 values: [0, 100]
@@ -1360,6 +1361,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');
@@ -1388,6 +1391,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;",
@@ -1817,6 +1855,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.put_ShapeProperties(props);
+                this.api.ImgApply(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',
@@ -1875,6 +1957,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'
     }, DE.Views.ShapeSettings || {}));
 });
diff --git a/apps/documenteditor/main/app/view/TextArtSettings.js b/apps/documenteditor/main/app/view/TextArtSettings.js
index 9d07d7922..7a29bfd4b 100644
--- a/apps/documenteditor/main/app/view/TextArtSettings.js
+++ b/apps/documenteditor/main/app/view/TextArtSettings.js
@@ -646,6 +646,7 @@ 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.ShapeColor = {Value: 1, Color: this.GradColor.colors[0]};
                 }
@@ -913,7 +914,7 @@ define([
 
             this.sldrGradient = new Common.UI.MultiSliderGradient({
                 el: $('#textart-slider-gradient'),
-                width: 125,
+                width: 192,
                 minValue: 0,
                 maxValue: 100,
                 values: [0, 100]
@@ -925,6 +926,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');
@@ -953,6 +956,41 @@ define([
             });
             this.lockedControls.push(this.sldrGradient);
 
+            this.spnGradPosition = new Common.UI.MetricSpinner({
+                el: $('#textart-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: $('#textart-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: $('#textart-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: $('#textart-combo-border-size'),
                 style: "width: 93px;",
@@ -1151,6 +1189,50 @@ define([
             }
         },
 
+        onPositionChange: function(btn) {
+            var pos = btn.getNumberValue();
+            if (this.api) {
+                this.GradColor.values[this.GradColor.currentIdx] = pos;
+                var props = new Asc.asc_TextArtProperties();
+                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.shapeprops.put_TextArtProperties(props);
+                this.api.ImgApply(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',
@@ -1169,6 +1251,9 @@ define([
         textBorderSizeErr: 'The entered value is incorrect.<br>Please enter a value between 0 pt and 1584 pt.',
         textTransform: 'Transform',
         textTemplate: 'Template',
-        strType: 'Type'
+        strType: 'Type',
+        textPosition: 'Position',
+        tipAddGradientPoint: 'Add gradient point',
+        tipRemoveGradientPoint: 'Remove gradient point'
     }, DE.Views.TextArtSettings || {}));
 });
diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json
index 30b809527..75e36acf4 100644
--- a/apps/documenteditor/main/locale/en.json
+++ b/apps/documenteditor/main/locale/en.json
@@ -2018,6 +2018,9 @@
   "DE.Views.ShapeSettings.txtWood": "Wood",
   "DE.Views.ShapeSettings.textFromStorage": "From Storage",
   "DE.Views.ShapeSettings.textSelectImage": "Select Picture",
+  "DE.Views.ShapeSettings.textPosition": "Position",
+  "DE.Views.ShapeSettings.tipAddGradientPoint": "Add gradient point",
+  "DE.Views.ShapeSettings.tipRemoveGradientPoint": "Remove gradient point",
   "DE.Views.SignatureSettings.notcriticalErrorTitle": "Warning",
   "DE.Views.SignatureSettings.strDelete": "Remove Signature",
   "DE.Views.SignatureSettings.strDetails": "Signature Details",
@@ -2218,6 +2221,9 @@
   "DE.Views.TextArtSettings.textTemplate": "Template",
   "DE.Views.TextArtSettings.textTransform": "Transform",
   "DE.Views.TextArtSettings.txtNoBorders": "No Line",
+  "DE.Views.TextArtSettings.textPosition": "Position",
+  "DE.Views.TextArtSettings.tipAddGradientPoint": "Add gradient point",
+  "DE.Views.TextArtSettings.tipRemoveGradientPoint": "Remove gradient point",
   "DE.Views.Toolbar.capBtnAddComment": "Add Comment",
   "DE.Views.Toolbar.capBtnBlankPage": "Blank Page",
   "DE.Views.Toolbar.capBtnColumns": "Columns",