diff --git a/apps/common/main/lib/component/MultiSliderGradient.js b/apps/common/main/lib/component/MultiSliderGradient.js
index 71a5bf3a6..d4bf91a62 100644
--- a/apps/common/main/lib/component/MultiSliderGradient.js
+++ b/apps/common/main/lib/component/MultiSliderGradient.js
@@ -56,8 +56,8 @@ define([
             colorValues: ['#000000', '#ffffff'],
             currentThumb: 0,
             thumbTemplate: '<div class="thumb img-commonctrl" style="">' +
-                            '<div class="thumb-top"></div>' +
-                            '<div class="thumb-bottom"></div>' +
+                            '<div class="thumb-top"><div class="thumb-top-inner"></div></div>' +
+                            '<div class="thumb-bottom"><div class="thumb-bottom-inner"></div></div>' +
                             '</div>'
         },
 
@@ -146,6 +146,43 @@ define([
             return recalc_indexes;
         },
 
+        findLeftThumb: function(pos) {
+            var me = this,
+                leftThumb = 100,
+                index = 0,
+                len = this.thumbs.length,
+                dist;
+
+            for (var i=0; i<len; i++) {
+                dist = pos - me.thumbs[i].position;
+                if (dist > 0 && dist <= leftThumb) {
+                    var above = me.thumbs[i + 1];
+                    var below = me.thumbs[i - 1];
+
+                    if (below !== undefined && pos < below.position) {
+                        continue;
+                    }
+                    if (above !== undefined && pos > above.position) {
+                        continue;
+                    }
+                    index = i;
+                    leftThumb = dist;
+                }
+            }
+            return index;
+        },
+
+        calculationNewColor: function(color1, color2, ratio) {
+            var w1 = ratio ? ratio/100 : 0.5;
+            var w2 = 1 - w1;
+            var rgbColor1 = Common.Utils.ThemeColor.getRgbColor(color1),
+                rgbColor2 = Common.Utils.ThemeColor.getRgbColor(color2);
+            var rgb = [Math.round(rgbColor1.get_r() * w2 + rgbColor2.get_r() * w1),
+                Math.round(rgbColor1.get_g() * w2 + rgbColor2.get_g() * w1),
+                Math.round(rgbColor1.get_b() * w2 + rgbColor2.get_b() * w1)];
+            return Common.Utils.ThemeColor.getHexColor(rgb[0], rgb[1], rgb[2]);
+        },
+
         addThumb: function() {
             Common.UI.MultiSlider.prototype.addThumb.call(this);
 
@@ -159,13 +196,29 @@ define([
             me.changeSliderStyle();
         },
 
-        addNewThumb: function(index, color) {
-            var me = this;
+        addNewThumb: function(index, pos, curIndex) {
+            var me = this,
+                indexLeftThumb = this.findLeftThumb(pos),
+                index = index,
+                color;
+            if (!_.isUndefined(curIndex)) {
+                this.addThumb();
+                index = this.thumbs.length - 1;
+                color = this.calculationNewColor(this.thumbs[indexLeftThumb].colorValue, this.thumbs[indexLeftThumb === index - 1 ? indexLeftThumb : indexLeftThumb + 1].colorValue);
+                this.setThumbPosition(index, pos);
+                var value = pos/this.delta + this.minValue;
+                this.thumbs[index].value = value;
+            } else {
+                var ratio = (pos - this.thumbs[indexLeftThumb].value) * 100 / (this.thumbs[indexLeftThumb + 1].value - this.thumbs[indexLeftThumb].value);
+                color = ratio < 0 ? this.thumbs[indexLeftThumb].colorValue : this.calculationNewColor(this.thumbs[indexLeftThumb].colorValue, this.thumbs[indexLeftThumb === index - 1 ? indexLeftThumb : indexLeftThumb + 1].colorValue, ratio);
+            }
             me.thumbs[index].thumbcolor = me.thumbs[index].thumb.find('> div');
-            (index>0) && this.setColorValue(color, index);
+            (index>0) && this.setColorValue('#' + color, index);
             me.sortThumbs();
             me.changeSliderStyle();
             me.changeGradientStyle();
+
+            return color;
         },
 
         removeThumb: function(index) {
diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js
index 6565a72a7..f6f110811 100644
--- a/apps/common/main/lib/component/Slider.js
+++ b/apps/common/main/lib/component/Slider.js
@@ -432,7 +432,7 @@ define([
                 var index = me.thumbs.length - 1;
                 me.setThumbPosition(index, pos);
                 me.thumbs[index].value = value;
-                me.trigger('addthumb', me, index, nearIndex, thumbColor);
+                me.trigger('addthumb', me, index, pos);
 
                 me.trigger('change', me);
                 me.trigger('changecomplete', me);
diff --git a/apps/common/main/resources/less/multislider-gradient.less b/apps/common/main/resources/less/multislider-gradient.less
index 562f15b8f..898e04ac7 100644
--- a/apps/common/main/resources/less/multislider-gradient.less
+++ b/apps/common/main/resources/less/multislider-gradient.less
@@ -22,6 +22,11 @@
             border-left: solid 1px @gray-darker;
             border-radius: 0 3px;
             box-sizing: content-box;
+            .thumb-top-inner {
+                border-top: solid 1px #fff;
+                border-left: solid 1px #fff;
+                height: 100%;
+            }
         }
 
         .thumb-bottom {
@@ -29,16 +34,34 @@
             top: 6px;
             left: 1px;
             width: 10px;
-            height: 8px;
+            height: 9px;
             background-color: #ffffff;
             border: solid 1px @gray-darker;
             border-top: none;
             border-radius: 2px;
             box-sizing: content-box;
+            .thumb-bottom-inner {
+                border: solid 1px #fff;
+                border-top: none;
+                height: 100%;
+            }
         }
 
-        &.active .thumb-bottom {
-            border-bottom-width: 2px;
+        &.active {
+            .thumb-top {
+                border-top: solid 1px #000;
+                border-left: solid 1px #000;
+            }
+            .thumb-bottom {
+                border: solid 1px #000;
+                border-top: none;
+            }
+        }
+
+        &:hover {
+            .thumb-bottom {
+                box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.32);
+            }
         }
 
         &.remove {
@@ -58,6 +81,8 @@
 
         background-position: 0 0;
         outline: 1px solid rgba(162, 162, 162, 1);
+        border: 1px solid #FFFFFF;
+        cursor: copy;
     }
 }
 
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..0d1052bde 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -513,6 +513,7 @@ define([
 
         onGradientChange: function(slider, newValue, oldValue){
             this.GradColor.values = slider.getValues();
+            this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
             this._sliderChanged = true;
             if (this.api && !this._noApply) {
                 if (this._sendUndoPoint)  {
@@ -973,6 +974,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 +1350,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 +1362,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');
@@ -1376,18 +1380,60 @@ define([
                 me.GradColor.colors = colors;
                 me.GradColor.currentIdx = currentIdx;
             });
-            this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
-                me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
+            this.sldrGradient.on('addthumb', function(cmp, index, pos){
+                me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
                 me.GradColor.currentIdx = index;
-                me.sldrGradient.addNewThumb(index, color);
+                var color = me.sldrGradient.addNewThumb(index, pos);
+                me.GradColor.colors[me.GradColor.currentIdx] = color;
             });
             this.sldrGradient.on('removethumb', function(cmp, index){
                 me.sldrGradient.removeThumb(index);
                 me.GradColor.values.splice(index, 1);
                 me.sldrGradient.changeGradientStyle();
+                if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= me.GradColor.colors.length) {
+                    var newIndex = index > 0 ? index - 1 : index;
+                    newIndex = (newIndex === 0 && me.GradColor.values.length > 2) ? me.GradColor.values.length - 2 : newIndex;
+                    me.GradColor.currentIdx = newIndex;
+                }
+                me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
             });
             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 +1863,64 @@ define([
             }
         },
 
+        onPositionChange: function(btn) {
+            var pos = btn.getNumberValue(),
+                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+                maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
+                needSort = pos < minValue || pos > maxValue;
+            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);
+
+                if (needSort) {
+                    this.sldrGradient.sortThumbs();
+                    this.sldrGradient.trigger('change', this.sldrGradient);
+                    this.sldrGradient.trigger('changecomplete', this.sldrGradient);
+                }
+            }
+        },
+
+        onAddGradientStep: function() {
+            if (this.GradColor.colors.length > 9) return;
+            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;
+            var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
+            this.GradColor.colors[this.GradColor.currentIdx] = color;
+
+            this.sldrGradient.trigger('change', this.sldrGradient);
+            this.sldrGradient.trigger('changecomplete', this.sldrGradient);
+        },
+
+        onRemoveGradientStep: function() {
+            if (this.GradColor.values.length < 3) return;
+            var index = this.GradColor.currentIdx;
+            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) {
+                var newIndex = index > 0 ? index - 1 : index;
+                newIndex = (newIndex === 0 && this.GradColor.values.length > 2) ? this.GradColor.values.length - 2 : newIndex;
+                this.GradColor.currentIdx = newIndex;
+            }
+            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 +1979,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..c982851df 100644
--- a/apps/documenteditor/main/app/view/TextArtSettings.js
+++ b/apps/documenteditor/main/app/view/TextArtSettings.js
@@ -378,6 +378,7 @@ define([
 
         onGradientChange: function(slider, newValue, oldValue){
             this.GradColor.values = slider.getValues();
+            this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
             this._sliderChanged = true;
             if (this.api && !this._noApply) {
                 if (this._sendUndoPoint)  {
@@ -646,6 +647,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 +915,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 +927,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');
@@ -941,18 +945,60 @@ define([
                 me.GradColor.colors = colors;
                 me.GradColor.currentIdx = currentIdx;
             });
-            this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
-                me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
+            this.sldrGradient.on('addthumb', function(cmp, index, pos){
+                me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
                 me.GradColor.currentIdx = index;
-                me.sldrGradient.addNewThumb(index, color);
+                var color = me.sldrGradient.addNewThumb(index, pos);
+                me.GradColor.colors[me.GradColor.currentIdx] = color;
             });
             this.sldrGradient.on('removethumb', function(cmp, index){
                 me.sldrGradient.removeThumb(index);
                 me.GradColor.values.splice(index, 1);
                 me.sldrGradient.changeGradientStyle();
+                if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= me.GradColor.colors.length) {
+                    var newIndex = index > 0 ? index - 1 : index;
+                    newIndex = (newIndex === 0 && me.GradColor.values.length > 2) ? me.GradColor.values.length - 2 : newIndex;
+                    me.GradColor.currentIdx = newIndex;
+                }
+                me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
             });
             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 +1197,64 @@ define([
             }
         },
 
+        onPositionChange: function(btn) {
+            var pos = btn.getNumberValue(),
+                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+                maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
+                needSort = pos < minValue || pos > maxValue;
+            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);
+
+                if (needSort) {
+                    this.sldrGradient.sortThumbs();
+                    this.sldrGradient.trigger('change', this.sldrGradient);
+                    this.sldrGradient.trigger('changecomplete', this.sldrGradient);
+                }
+            }
+        },
+
+        onAddGradientStep: function() {
+            if (this.GradColor.colors.length > 9) return;
+            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;
+            var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
+            this.GradColor.colors[this.GradColor.currentIdx] = color;
+
+            this.sldrGradient.trigger('change', this.sldrGradient);
+            this.sldrGradient.trigger('changecomplete', this.sldrGradient);
+        },
+
+        onRemoveGradientStep: function() {
+            if (this.GradColor.values.length < 3) return;
+            var index = this.GradColor.currentIdx;
+            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) {
+                var newIndex = index > 0 ? index - 1 : index;
+                newIndex = (newIndex === 0 && this.GradColor.values.length > 2) ? this.GradColor.values.length - 2 : newIndex;
+                this.GradColor.currentIdx = newIndex;
+            }
+            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 +1273,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 79b088a3a..e40c16820 100644
--- a/apps/documenteditor/main/locale/en.json
+++ b/apps/documenteditor/main/locale/en.json
@@ -2024,6 +2024,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",
@@ -2224,6 +2227,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",
diff --git a/apps/documenteditor/main/resources/img/toolbar/1.25x/btn-add-breakpoint.png b/apps/documenteditor/main/resources/img/toolbar/1.25x/btn-add-breakpoint.png
new file mode 100644
index 000000000..66b94d208
Binary files /dev/null and b/apps/documenteditor/main/resources/img/toolbar/1.25x/btn-add-breakpoint.png differ
diff --git a/apps/documenteditor/main/resources/img/toolbar/1.25x/btn-remove-breakpoint.png b/apps/documenteditor/main/resources/img/toolbar/1.25x/btn-remove-breakpoint.png
new file mode 100644
index 000000000..fab4af0e4
Binary files /dev/null and b/apps/documenteditor/main/resources/img/toolbar/1.25x/btn-remove-breakpoint.png differ
diff --git a/apps/documenteditor/main/resources/img/toolbar/1.5x/btn-add-breakpoint.png b/apps/documenteditor/main/resources/img/toolbar/1.5x/btn-add-breakpoint.png
new file mode 100644
index 000000000..007cb20d9
Binary files /dev/null and b/apps/documenteditor/main/resources/img/toolbar/1.5x/btn-add-breakpoint.png differ
diff --git a/apps/documenteditor/main/resources/img/toolbar/1.5x/btn-remove-breakpoint.png b/apps/documenteditor/main/resources/img/toolbar/1.5x/btn-remove-breakpoint.png
new file mode 100644
index 000000000..66ab34e8a
Binary files /dev/null and b/apps/documenteditor/main/resources/img/toolbar/1.5x/btn-remove-breakpoint.png differ
diff --git a/apps/documenteditor/main/resources/img/toolbar/1.75x/btn-add-breakpoint.png b/apps/documenteditor/main/resources/img/toolbar/1.75x/btn-add-breakpoint.png
new file mode 100644
index 000000000..d089c5e6e
Binary files /dev/null and b/apps/documenteditor/main/resources/img/toolbar/1.75x/btn-add-breakpoint.png differ
diff --git a/apps/documenteditor/main/resources/img/toolbar/1.75x/btn-remove-breakpoint.png b/apps/documenteditor/main/resources/img/toolbar/1.75x/btn-remove-breakpoint.png
new file mode 100644
index 000000000..110bdbc6a
Binary files /dev/null and b/apps/documenteditor/main/resources/img/toolbar/1.75x/btn-remove-breakpoint.png differ
diff --git a/apps/documenteditor/main/resources/img/toolbar/1x/btn-add-breakpoint.png b/apps/documenteditor/main/resources/img/toolbar/1x/btn-add-breakpoint.png
new file mode 100644
index 000000000..6b6eda926
Binary files /dev/null and b/apps/documenteditor/main/resources/img/toolbar/1x/btn-add-breakpoint.png differ
diff --git a/apps/documenteditor/main/resources/img/toolbar/1x/btn-remove-breakpoint.png b/apps/documenteditor/main/resources/img/toolbar/1x/btn-remove-breakpoint.png
new file mode 100644
index 000000000..499033fc0
Binary files /dev/null and b/apps/documenteditor/main/resources/img/toolbar/1x/btn-remove-breakpoint.png differ
diff --git a/apps/documenteditor/main/resources/img/toolbar/2x/btn-add-breakpoint.png b/apps/documenteditor/main/resources/img/toolbar/2x/btn-add-breakpoint.png
new file mode 100644
index 000000000..c025ed145
Binary files /dev/null and b/apps/documenteditor/main/resources/img/toolbar/2x/btn-add-breakpoint.png differ
diff --git a/apps/documenteditor/main/resources/img/toolbar/2x/btn-remove-breakpoint.png b/apps/documenteditor/main/resources/img/toolbar/2x/btn-remove-breakpoint.png
new file mode 100644
index 000000000..f066ecac2
Binary files /dev/null and b/apps/documenteditor/main/resources/img/toolbar/2x/btn-remove-breakpoint.png differ
diff --git a/apps/presentationeditor/main/app/template/ShapeSettings.template b/apps/presentationeditor/main/app/template/ShapeSettings.template
index a3d435a03..1bca1a8a5 100644
--- a/apps/presentationeditor/main/app/template/ShapeSettings.template
+++ b/apps/presentationeditor/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/presentationeditor/main/app/template/SlideSettings.template b/apps/presentationeditor/main/app/template/SlideSettings.template
index ccb7dea97..6fcfca484 100644
--- a/apps/presentationeditor/main/app/template/SlideSettings.template
+++ b/apps/presentationeditor/main/app/template/SlideSettings.template
@@ -66,7 +66,22 @@
                 <div style="display: inline-block; margin-top: 3px;">
                     <div id="slide-slider-gradient" style="display: inline-block; vertical-align: middle;"></div>
                 </div>
-                <div id="slide-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="slide-gradient-color-btn"></div>
+                    </div>
+                    <div style="margin-left: 10px;">
+                        <label class="input-label" style=""><%= scope.textPosition %></label>
+                        <div id="slide-gradient-position"></div>
+                    </div>
+                    </div>
+                    <div style="display:flex;padding-top:15px;">
+                        <div id="slide-gradient-add-step"></div>
+                        <div id="slide-gradient-remove-step"></div>
+                    </div>
+                </div>
             </div>
         </td>
     </tr>
diff --git a/apps/presentationeditor/main/app/template/TextArtSettings.template b/apps/presentationeditor/main/app/template/TextArtSettings.template
index 64921d1ff..a89a18a89 100644
--- a/apps/presentationeditor/main/app/template/TextArtSettings.template
+++ b/apps/presentationeditor/main/app/template/TextArtSettings.template
@@ -84,7 +84,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/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js
index 5b214f2e9..ad3f325d6 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettings.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettings.js
@@ -494,6 +494,7 @@ define([
 
         onGradientChange: function(slider, newValue, oldValue){
             this.GradColor.values = slider.getValues();
+            this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
             this._sliderChanged = true;
             if (this.api && !this._noApply) {
                 if (this._sendUndoPoint)  {
@@ -885,7 +886,8 @@ define([
                     if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
                         me.GradColor.currentIdx = 0;
                     }
-                    me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
+                    this.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'};
@@ -1260,7 +1262,7 @@ define([
 
             this.sldrGradient = new Common.UI.MultiSliderGradient({
                 el: $('#shape-slider-gradient'),
-                width: 125,
+                width: 192,
                 minValue: 0,
                 maxValue: 100,
                 values: [0, 100]
@@ -1272,6 +1274,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');
@@ -1288,18 +1292,60 @@ define([
                 me.GradColor.colors = colors;
                 me.GradColor.currentIdx = currentIdx;
             });
-            this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
-                me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
+            this.sldrGradient.on('addthumb', function(cmp, index, pos){
+                me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
                 me.GradColor.currentIdx = index;
-                me.sldrGradient.addNewThumb(index, color);
+                var color = me.sldrGradient.addNewThumb(index, pos);
+                me.GradColor.colors[me.GradColor.currentIdx] = color;
             });
             this.sldrGradient.on('removethumb', function(cmp, index){
                 me.sldrGradient.removeThumb(index);
                 me.GradColor.values.splice(index, 1);
                 me.sldrGradient.changeGradientStyle();
+                if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= me.GradColor.colors.length) {
+                    var newIndex = index > 0 ? index - 1 : index;
+                    newIndex = (newIndex === 0 && me.GradColor.values.length > 2) ? me.GradColor.values.length - 2 : newIndex;
+                    me.GradColor.currentIdx = newIndex;
+                }
+                me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
             });
             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;",
@@ -1689,6 +1735,63 @@ define([
             }
         },
 
+        onPositionChange: function(btn) {
+            var pos = btn.getNumberValue(),
+                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+                maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
+                needSort = pos < minValue || pos > maxValue;
+            if (this.api) {
+                this.GradColor.values[this.GradColor.currentIdx] = pos;
+                var props = new Asc.asc_CShapeProperty();
+                var fill = new Asc.asc_CShapeFill();
+                fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD);
+                fill.put_fill( new Asc.asc_CFillGrad());
+                fill.get_fill().put_grad_type(this.GradFillType);
+                var arr = [];
+                this.GradColor.values.forEach(function(item){
+                    arr.push(item*1000);
+                });
+                fill.get_fill().put_positions(arr);
+                props.put_fill(fill);
+                this.api.ShapeApply(props);
+
+                if (needSort) {
+                    this.sldrGradient.sortThumbs();
+                    this.sldrGradient.trigger('change', this.sldrGradient);
+                    this.sldrGradient.trigger('changecomplete', this.sldrGradient);
+                }
+            }
+        },
+
+        onAddGradientStep: function() {
+            if (this.GradColor.colors.length > 9) return;
+            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;
+            var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
+            this.GradColor.colors[this.GradColor.currentIdx] = color;
+
+            this.sldrGradient.trigger('change', this.sldrGradient);
+            this.sldrGradient.trigger('changecomplete', this.sldrGradient);
+        },
+
+        onRemoveGradientStep: function() {
+            if (this.GradColor.values.length < 3) return;
+            var index = this.GradColor.currentIdx;
+            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) {
+                var newIndex = index > 0 ? index - 1 : index;
+                newIndex = (newIndex === 0 && this.GradColor.values.length > 2) ? this.GradColor.values.length - 2 : newIndex;
+                this.GradColor.currentIdx = newIndex;
+            }
+            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',
@@ -1739,6 +1842,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'
     }, PE.Views.ShapeSettings || {}));
 });
diff --git a/apps/presentationeditor/main/app/view/SlideSettings.js b/apps/presentationeditor/main/app/view/SlideSettings.js
index 3bbed8708..f55e5e1d5 100644
--- a/apps/presentationeditor/main/app/view/SlideSettings.js
+++ b/apps/presentationeditor/main/app/view/SlideSettings.js
@@ -595,6 +595,7 @@ define([
 
         onGradientChange: function(slider, newValue, oldValue){
             this.GradColor.values = slider.getValues();
+            this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
             this._sliderChanged = true;
             if (this.api && !this._noApply) {
                 if (this._sendUndoPoint)  {
@@ -806,7 +807,7 @@ define([
 
             this.sldrGradient = new Common.UI.MultiSliderGradient({
                 el: $('#slide-slider-gradient'),
-                width: 125,
+                width: 192,
                 minValue: 0,
                 maxValue: 100,
                 values: [0, 100]
@@ -818,6 +819,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');
@@ -834,18 +837,60 @@ define([
                 me.GradColor.colors = colors;
                 me.GradColor.currentIdx = currentIdx;
             });
-            this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
-                me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
+            this.sldrGradient.on('addthumb', function(cmp, index, pos){
+                me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
                 me.GradColor.currentIdx = index;
-                me.sldrGradient.addNewThumb(index, color);
+                var color = me.sldrGradient.addNewThumb(index, pos);
+                me.GradColor.colors[me.GradColor.currentIdx] = color;
             });
             this.sldrGradient.on('removethumb', function(cmp, index){
                 me.sldrGradient.removeThumb(index);
                 me.GradColor.values.splice(index, 1);
                 me.sldrGradient.changeGradientStyle();
+                if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= me.GradColor.colors.length) {
+                    var newIndex = index > 0 ? index - 1 : index;
+                    newIndex = (newIndex === 0 && me.GradColor.values.length > 2) ? me.GradColor.values.length - 2 : newIndex;
+                    me.GradColor.currentIdx = newIndex;
+                }
+                me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
             });
             this.FillItems.push(this.sldrGradient);
 
+            this.spnGradPosition = new Common.UI.MetricSpinner({
+                el: $('#slide-gradient-position'),
+                step: 1,
+                width: 60,
+                defaultUnit : "%",
+                value: '50 %',
+                allowDecimal: false,
+                maxValue: 100,
+                minValue: 0,
+                disabled: this._locked
+            });
+            this.FillItems.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: $('#slide-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.FillItems.push(this.btnAddGradientStep);
+
+            this.btnRemoveGradientStep = new Common.UI.Button({
+                parentEl: $('#slide-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.FillItems.push(this.btnRemoveGradientStep);
+
         },
         
         createDelayedElements: function() {
@@ -1274,6 +1319,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'};
@@ -1489,6 +1535,63 @@ define([
             }
         },
 
+        onPositionChange: function(btn) {
+            var pos = btn.getNumberValue(),
+                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+                maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
+                needSort = pos < minValue || pos > maxValue;
+            if (this.api) {
+                this.GradColor.values[this.GradColor.currentIdx] = pos;
+                var props = new Asc.CAscSlideProps();
+                var fill = new Asc.asc_CShapeFill();
+                fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD);
+                fill.put_fill( new Asc.asc_CFillGrad());
+                fill.get_fill().put_grad_type(this.GradFillType);
+                var arr = [];
+                this.GradColor.values.forEach(function(item){
+                    arr.push(item*1000);
+                });
+                fill.get_fill().put_positions(arr);
+                props.put_background(fill);
+                this.api.SetSlideProps(props);
+
+                if (needSort) {
+                    this.sldrGradient.sortThumbs();
+                    this.sldrGradient.trigger('change', this.sldrGradient);
+                    this.sldrGradient.trigger('changecomplete', this.sldrGradient);
+                }
+            }
+        },
+
+        onAddGradientStep: function() {
+            if (this.GradColor.colors.length > 9) return;
+            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;
+            var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
+            this.GradColor.colors[this.GradColor.currentIdx] = color;
+
+            this.sldrGradient.trigger('change', this.sldrGradient);
+            this.sldrGradient.trigger('changecomplete', this.sldrGradient);
+        },
+
+        onRemoveGradientStep: function() {
+            if (this.GradColor.values.length < 3) return;
+            var index = this.GradColor.currentIdx;
+            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) {
+                var newIndex = index > 0 ? index - 1 : index;
+                newIndex = (newIndex === 0 && this.GradColor.values.length > 2) ? this.GradColor.values.length - 2 : newIndex;
+                this.GradColor.currentIdx = newIndex;
+            }
+            this.sldrGradient.setActiveThumb(this.GradColor.currentIdx);
+            this.sldrGradient.trigger('change', this.sldrGradient);
+            this.sldrGradient.trigger('changecomplete', this.sldrGradient);
+        },
+
         strColor                : 'Color',
         strFill                 : 'Background',
         textColor               : 'Color Fill',
@@ -1562,6 +1665,9 @@ define([
         strSlideNum: 'Show Slide Number',
         strDateTime: 'Show Date and Time',
         textFromStorage: 'From Storage',
-        textSelectImage: 'Select Picture'
+        textSelectImage: 'Select Picture',
+        textPosition: 'Position',
+        tipAddGradientPoint: 'Add gradient point',
+        tipRemoveGradientPoint: 'Remove gradient point'
     }, PE.Views.SlideSettings || {}));
 });
diff --git a/apps/presentationeditor/main/app/view/TextArtSettings.js b/apps/presentationeditor/main/app/view/TextArtSettings.js
index 160ecfc20..4e0d7b53c 100644
--- a/apps/presentationeditor/main/app/view/TextArtSettings.js
+++ b/apps/presentationeditor/main/app/view/TextArtSettings.js
@@ -498,6 +498,7 @@ define([
 
         onGradientChange: function(slider, newValue, oldValue){
             this.GradColor.values = slider.getValues();
+            this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
             this._sliderChanged = true;
             if (this.api && !this._noApply) {
                 if (this._sendUndoPoint)  {
@@ -840,6 +841,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'};
@@ -1220,7 +1222,7 @@ define([
 
             this.sldrGradient = new Common.UI.MultiSliderGradient({
                 el: $('#textart-slider-gradient'),
-                width: 125,
+                width: 192,
                 minValue: 0,
                 maxValue: 100,
                 values: [0, 100]
@@ -1232,6 +1234,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');
@@ -1248,18 +1252,60 @@ define([
                 me.GradColor.colors = colors;
                 me.GradColor.currentIdx = currentIdx;
             });
-            this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
-                me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
+            this.sldrGradient.on('addthumb', function(cmp, index, pos){
+                me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
                 me.GradColor.currentIdx = index;
-                me.sldrGradient.addNewThumb(index, color);
+                var color = me.sldrGradient.addNewThumb(index, pos);
+                me.GradColor.colors[me.GradColor.currentIdx] = color;
             });
             this.sldrGradient.on('removethumb', function(cmp, index){
                 me.sldrGradient.removeThumb(index);
                 me.GradColor.values.splice(index, 1);
                 me.sldrGradient.changeGradientStyle();
+                if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= me.GradColor.colors.length) {
+                    var newIndex = index > 0 ? index - 1 : index;
+                    newIndex = (newIndex === 0 && me.GradColor.values.length > 2) ? me.GradColor.values.length - 2 : newIndex;
+                    me.GradColor.currentIdx = newIndex;
+                }
+                me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
             });
             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;",
@@ -1582,6 +1628,64 @@ define([
             }
         },
 
+        onPositionChange: function(btn) {
+            var pos = btn.getNumberValue(),
+                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+                maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
+                needSort = pos < minValue || pos > maxValue;
+            if (this.api) {
+                this.GradColor.values[this.GradColor.currentIdx] = pos;
+                var props = new Asc.asc_TextArtProperties();
+                var fill = new Asc.asc_CShapeFill();
+                fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD);
+                fill.put_fill( new Asc.asc_CFillGrad());
+                fill.get_fill().put_grad_type(this.GradFillType);
+                var arr = [];
+                this.GradColor.values.forEach(function(item){
+                    arr.push(item*1000);
+                });
+                fill.get_fill().put_positions(arr);
+                props.asc_putFill(fill);
+                this.shapeprops.put_TextArtProperties(props);
+                this.api.ShapeApply(this.shapeprops);
+
+                if (needSort) {
+                    this.sldrGradient.sortThumbs();
+                    this.sldrGradient.trigger('change', this.sldrGradient);
+                    this.sldrGradient.trigger('changecomplete', this.sldrGradient);
+                }
+            }
+        },
+
+        onAddGradientStep: function() {
+            if (this.GradColor.colors.length > 9) return;
+            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;
+            var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
+            this.GradColor.colors[this.GradColor.currentIdx] = color;
+
+            this.sldrGradient.trigger('change', this.sldrGradient);
+            this.sldrGradient.trigger('changecomplete', this.sldrGradient);
+        },
+
+        onRemoveGradientStep: function() {
+            if (this.GradColor.values.length < 3) return;
+            var index = this.GradColor.currentIdx;
+            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) {
+                var newIndex = index > 0 ? index - 1 : index;
+                newIndex = (newIndex === 0 && this.GradColor.values.length > 2) ? this.GradColor.values.length - 2 : newIndex;
+                this.GradColor.currentIdx = newIndex;
+            }
+            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',
@@ -1622,6 +1726,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'
     }, PE.Views.TextArtSettings || {}));
 });
diff --git a/apps/presentationeditor/main/locale/en.json b/apps/presentationeditor/main/locale/en.json
index 6ae930552..4c596c059 100644
--- a/apps/presentationeditor/main/locale/en.json
+++ b/apps/presentationeditor/main/locale/en.json
@@ -1467,6 +1467,9 @@
   "PE.Views.ShapeSettings.txtWood": "Wood",
   "PE.Views.ShapeSettings.textFromStorage": "From Storage",
   "PE.Views.ShapeSettings.textSelectImage": "Select Picture",
+  "PE.Views.ShapeSettings.textPosition": "Position",
+  "PE.Views.ShapeSettings.tipAddGradientPoint": "Add gradient point",
+  "PE.Views.ShapeSettings.tipRemoveGradientPoint": "Remove gradient point",
   "PE.Views.ShapeSettingsAdvanced.strColumns": "Columns",
   "PE.Views.ShapeSettingsAdvanced.strMargins": "Text Padding",
   "PE.Views.ShapeSettingsAdvanced.textAlt": "Alternative Text",
@@ -1595,6 +1598,9 @@
   "PE.Views.SlideSettings.txtWood": "Wood",
   "PE.Views.SlideSettings.textFromStorage": "From Storage",
   "PE.Views.SlideSettings.textSelectImage": "Select Picture",
+  "PE.Views.SlideSettings.textPosition": "Position",
+  "PE.Views.SlideSettings.tipAddGradientPoint": "Add gradient point",
+  "PE.Views.SlideSettings.tipRemoveGradientPoint": "Remove gradient point",
   "PE.Views.SlideshowSettings.textLoop": "Loop continuously until 'Esc' is pressed",
   "PE.Views.SlideshowSettings.textTitle": "Show Settings",
   "PE.Views.SlideSizeSettings.strLandscape": "Landscape",
@@ -1738,6 +1744,9 @@
   "PE.Views.TextArtSettings.txtNoBorders": "No Line",
   "PE.Views.TextArtSettings.txtPapyrus": "Papyrus",
   "PE.Views.TextArtSettings.txtWood": "Wood",
+  "PE.Views.TextArtSettings.textPosition": "Position",
+  "PE.Views.TextArtSettings.tipAddGradientPoint": "Add gradient point",
+  "PE.Views.TextArtSettings.tipRemoveGradientPoint": "Remove gradient point",
   "PE.Views.Toolbar.capAddSlide": "Add Slide",
   "PE.Views.Toolbar.capBtnAddComment": "Add Comment",
   "PE.Views.Toolbar.capBtnComment": "Comment",
diff --git a/apps/presentationeditor/main/resources/img/toolbar/1.25x/btn-add-breakpoint.png b/apps/presentationeditor/main/resources/img/toolbar/1.25x/btn-add-breakpoint.png
new file mode 100644
index 000000000..66b94d208
Binary files /dev/null and b/apps/presentationeditor/main/resources/img/toolbar/1.25x/btn-add-breakpoint.png differ
diff --git a/apps/presentationeditor/main/resources/img/toolbar/1.25x/btn-remove-breakpoint.png b/apps/presentationeditor/main/resources/img/toolbar/1.25x/btn-remove-breakpoint.png
new file mode 100644
index 000000000..fab4af0e4
Binary files /dev/null and b/apps/presentationeditor/main/resources/img/toolbar/1.25x/btn-remove-breakpoint.png differ
diff --git a/apps/presentationeditor/main/resources/img/toolbar/1.5x/btn-add-breakpoint.png b/apps/presentationeditor/main/resources/img/toolbar/1.5x/btn-add-breakpoint.png
new file mode 100644
index 000000000..007cb20d9
Binary files /dev/null and b/apps/presentationeditor/main/resources/img/toolbar/1.5x/btn-add-breakpoint.png differ
diff --git a/apps/presentationeditor/main/resources/img/toolbar/1.5x/btn-remove-breakpoint.png b/apps/presentationeditor/main/resources/img/toolbar/1.5x/btn-remove-breakpoint.png
new file mode 100644
index 000000000..66ab34e8a
Binary files /dev/null and b/apps/presentationeditor/main/resources/img/toolbar/1.5x/btn-remove-breakpoint.png differ
diff --git a/apps/presentationeditor/main/resources/img/toolbar/1.75x/btn-add-breakpoint.png b/apps/presentationeditor/main/resources/img/toolbar/1.75x/btn-add-breakpoint.png
new file mode 100644
index 000000000..d089c5e6e
Binary files /dev/null and b/apps/presentationeditor/main/resources/img/toolbar/1.75x/btn-add-breakpoint.png differ
diff --git a/apps/presentationeditor/main/resources/img/toolbar/1.75x/btn-remove-breakpoint.png b/apps/presentationeditor/main/resources/img/toolbar/1.75x/btn-remove-breakpoint.png
new file mode 100644
index 000000000..110bdbc6a
Binary files /dev/null and b/apps/presentationeditor/main/resources/img/toolbar/1.75x/btn-remove-breakpoint.png differ
diff --git a/apps/presentationeditor/main/resources/img/toolbar/1x/btn-add-breakpoint.png b/apps/presentationeditor/main/resources/img/toolbar/1x/btn-add-breakpoint.png
new file mode 100644
index 000000000..6b6eda926
Binary files /dev/null and b/apps/presentationeditor/main/resources/img/toolbar/1x/btn-add-breakpoint.png differ
diff --git a/apps/presentationeditor/main/resources/img/toolbar/1x/btn-remove-breakpoint.png b/apps/presentationeditor/main/resources/img/toolbar/1x/btn-remove-breakpoint.png
new file mode 100644
index 000000000..499033fc0
Binary files /dev/null and b/apps/presentationeditor/main/resources/img/toolbar/1x/btn-remove-breakpoint.png differ
diff --git a/apps/presentationeditor/main/resources/img/toolbar/2x/btn-add-breakpoint.png b/apps/presentationeditor/main/resources/img/toolbar/2x/btn-add-breakpoint.png
new file mode 100644
index 000000000..c025ed145
Binary files /dev/null and b/apps/presentationeditor/main/resources/img/toolbar/2x/btn-add-breakpoint.png differ
diff --git a/apps/presentationeditor/main/resources/img/toolbar/2x/btn-remove-breakpoint.png b/apps/presentationeditor/main/resources/img/toolbar/2x/btn-remove-breakpoint.png
new file mode 100644
index 000000000..f066ecac2
Binary files /dev/null and b/apps/presentationeditor/main/resources/img/toolbar/2x/btn-remove-breakpoint.png differ
diff --git a/apps/spreadsheeteditor/main/app/template/CellSettings.template b/apps/spreadsheeteditor/main/app/template/CellSettings.template
index 0168b2dec..78fb733e6 100644
--- a/apps/spreadsheeteditor/main/app/template/CellSettings.template
+++ b/apps/spreadsheeteditor/main/app/template/CellSettings.template
@@ -41,7 +41,22 @@
                 <div style="display: inline-block; margin-top: 3px;">
                     <div id="cell-slider-gradient" style="display: inline-block; vertical-align: middle;"></div>
                 </div>
-                <div id="cell-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.textGradientColor %></label>
+                        <div id="cell-gradient-color-btn"></div>
+                    </div>
+                    <div style="margin-left: 10px;">
+                        <label class="input-label" style=""><%= scope.textPosition %></label>
+                        <div id="cell-gradient-position"></div>
+                    </div>
+                    </div>
+                    <div style="display:flex;padding-top:15px;">
+                        <div id="cell-gradient-add-step"></div>
+                        <div id="cell-gradient-remove-step"></div>
+                    </div>
+                </div>
             </div>
         </td>
     </tr>
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/template/TextArtSettings.template b/apps/spreadsheeteditor/main/app/template/TextArtSettings.template
index 64921d1ff..a89a18a89 100644
--- a/apps/spreadsheeteditor/main/app/template/TextArtSettings.template
+++ b/apps/spreadsheeteditor/main/app/template/TextArtSettings.template
@@ -84,7 +84,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/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js
index d23b4cc0d..a260cbb7f 100644
--- a/apps/spreadsheeteditor/main/app/view/CellSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js
@@ -249,7 +249,7 @@ define([
 
             this.sldrGradient = new Common.UI.MultiSliderGradient({
                 el: $('#cell-slider-gradient'),
-                width: 125,
+                width: 192,
                 minValue: 0,
                 maxValue: 100,
                 values: [0, 100]
@@ -261,6 +261,7 @@ define([
                 var color = me.GradColor.colors[me.GradColor.currentIdx];
                 me.btnGradColor.setColor(color);
                 me.colorsGrad.select(color,false);
+                me.spnGradPosition.setValue(me.GradColor.values[me.GradColor.currentIdx]);
             });
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
@@ -277,15 +278,22 @@ define([
                 me.GradColor.colors = colors;
                 me.GradColor.currentIdx = currentIdx;
             });
-            this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
-                me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
+            this.sldrGradient.on('addthumb', function(cmp, index, pos){
+                me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
                 me.GradColor.currentIdx = index;
-                me.sldrGradient.addNewThumb(index, color);
+                var color = me.sldrGradient.addNewThumb(index, pos);
+                me.GradColor.colors[me.GradColor.currentIdx] = color;
             });
             this.sldrGradient.on('removethumb', function(cmp, index){
                 me.sldrGradient.removeThumb(index);
                 me.GradColor.values.splice(index, 1);
                 me.sldrGradient.changeGradientStyle();
+                if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= me.GradColor.colors.length) {
+                    var newIndex = index > 0 ? index - 1 : index;
+                    newIndex = (newIndex === 0 && me.GradColor.values.length > 2) ? me.GradColor.values.length - 2 : newIndex;
+                    me.GradColor.currentIdx = newIndex;
+                }
+                me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
             });
             this.fillControls.push(this.sldrGradient);
 
@@ -430,6 +438,41 @@ define([
             this.spnAngle.on('change', _.bind(this.onAngleChange, this));
             this.spnAngle.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);});
 
+            this.spnGradPosition = new Common.UI.MetricSpinner({
+                el: $('#cell-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: $('#cell-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: $('#cell-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.chWrap = new Common.UI.CheckBox({
                 el: $('#cell-checkbox-wrap'),
                 labelText: this.strWrap,
@@ -650,6 +693,9 @@ define([
                         }
                         me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
 
+                        // Step position
+                        this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]);
+
                         this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
                         this.FGColor = {
                             Value: 1,
@@ -1072,6 +1118,7 @@ define([
 
         onGradientChange: function(slider, newValue, oldValue) {
             this.GradColor.values = slider.getValues();
+            this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
             this._sliderChanged = true;
             if (this.api && !this._noApply) {
                 if (this._sendUndoPoint)  {
@@ -1171,6 +1218,65 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this);
         },
 
+        onPositionChange: function(btn) {
+            var me = this,
+                pos = btn.getNumberValue(),
+                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+                maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
+                needSort = pos < minValue || pos > maxValue;
+            if (this.api) {
+                this.GradColor.values[this.GradColor.currentIdx] = pos;
+                if (this.gradient == null) {
+                    this.gradient = new Asc.asc_CGradientFill();
+                    this.gradient.asc_setType(this.GradFillType);
+                }
+                var arrGradStop = [];
+                this.GradColor.values.forEach(function (item, index) {
+                    var gradientStop = new Asc.asc_CGradientStop();
+                    gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(Common.Utils.ThemeColor.colorValue2EffectId(me.GradColor.colors[index])));
+                    gradientStop.asc_setPosition(me.GradColor.values[index]/100);
+                    arrGradStop.push(gradientStop);
+                });
+                this.gradient.asc_putGradientStops(arrGradStop);
+
+                this.fill.asc_setGradientFill(this.gradient);
+                this.api.asc_setCellFill(this.fill);
+
+                if (needSort) {
+                    this.sldrGradient.sortThumbs();
+                    this.sldrGradient.trigger('change', this.sldrGradient);
+                    this.sldrGradient.trigger('changecomplete', this.sldrGradient);
+                }
+            }
+        },
+
+        onAddGradientStep: function() {
+            if (this.GradColor.colors.length > 9) return;
+            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;
+            var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
+            this.GradColor.colors[this.GradColor.currentIdx] = color;
+
+            this.sldrGradient.trigger('change', this.sldrGradient);
+            this.sldrGradient.trigger('changecomplete', this.sldrGradient);
+        },
+
+        onRemoveGradientStep: function() {
+            if (this.GradColor.values.length < 3) return;
+            var index = this.GradColor.currentIdx;
+            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) {
+                var newIndex = index > 0 ? index - 1 : index;
+                newIndex = (newIndex === 0 && this.GradColor.values.length > 2) ? this.GradColor.values.length - 2 : newIndex;
+                this.GradColor.currentIdx = newIndex;
+            }
+            this.sldrGradient.setActiveThumb(this.GradColor.currentIdx);
+        },
+
         textBorders:        'Border\'s Style',
         textBorderColor:    'Color',
         textBackColor:      'Background color',
@@ -1203,7 +1309,11 @@ define([
         textGradient:       'Gradient',
         textControl: 'Text Control',
         strWrap: 'Wrap text',
-        strShrink: 'Shrink to fit'
+        strShrink: 'Shrink to fit',
+        textGradientColor: 'Color',
+        textPosition: 'Position',
+        tipAddGradientPoint: 'Add gradient point',
+        tipRemoveGradientPoint: 'Remove gradient point'
 
     }, SSE.Views.CellSettings || {}));
 });
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
index 10f66d9d8..d382468e5 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
@@ -509,6 +509,7 @@ define([
 
         onGradientChange: function(slider, newValue, oldValue){
             this.GradColor.values = slider.getValues();
+            this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
             this._sliderChanged = true;
             if (this.api && !this._noApply) {
                 if (this._sendUndoPoint)  {
@@ -910,6 +911,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 +1288,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 +1300,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');
@@ -1312,18 +1318,60 @@ define([
                 me.GradColor.colors = colors;
                 me.GradColor.currentIdx = currentIdx;
             });
-            this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
-                me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
+            this.sldrGradient.on('addthumb', function(cmp, index, pos){
+                me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
                 me.GradColor.currentIdx = index;
-                me.sldrGradient.addNewThumb(index, color);
+                var color = me.sldrGradient.addNewThumb(index, pos);
+                me.GradColor.colors[me.GradColor.currentIdx] = color;
             });
             this.sldrGradient.on('removethumb', function(cmp, index){
                 me.sldrGradient.removeThumb(index);
                 me.GradColor.values.splice(index, 1);
                 me.sldrGradient.changeGradientStyle();
+                if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= me.GradColor.colors.length) {
+                    var newIndex = index > 0 ? index - 1 : index;
+                    newIndex = (newIndex === 0 && me.GradColor.values.length > 2) ? me.GradColor.values.length - 2 : newIndex;
+                    me.GradColor.currentIdx = newIndex;
+                }
+                me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
             });
             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 +1765,64 @@ define([
             }
         },
 
+        onPositionChange: function(btn) {
+            var pos = btn.getNumberValue(),
+                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+                maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
+                needSort = pos < minValue || pos > maxValue;
+            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);
+
+                if (needSort) {
+                    this.sldrGradient.sortThumbs();
+                    this.sldrGradient.trigger('change', this.sldrGradient);
+                    this.sldrGradient.trigger('changecomplete', this.sldrGradient);
+                }
+            }
+        },
+
+        onAddGradientStep: function() {
+            if (this.GradColor.colors.length > 9) return;
+            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;
+            var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
+            this.GradColor.colors[this.GradColor.currentIdx] = color;
+
+            this.sldrGradient.trigger('change', this.sldrGradient);
+            this.sldrGradient.trigger('changecomplete', this.sldrGradient);
+        },
+
+        onRemoveGradientStep: function() {
+            if (this.GradColor.values.length < 3) return;
+            var index = this.GradColor.currentIdx;
+            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) {
+                var newIndex = index > 0 ? index - 1 : index;
+                newIndex = (newIndex === 0 && this.GradColor.values.length > 2) ? this.GradColor.values.length - 2 : newIndex;
+                this.GradColor.currentIdx = newIndex;
+            }
+            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 +1873,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/app/view/TextArtSettings.js b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js
index 0c775e9c7..4413045a5 100644
--- a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js
@@ -499,6 +499,7 @@ define([
 
         onGradientChange: function(slider, newValue, oldValue){
             this.GradColor.values = slider.getValues();
+            this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
             this._sliderChanged = true;
             if (this.api && !this._noApply) {
                 if (this._sendUndoPoint)  {
@@ -844,6 +845,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'};
@@ -1224,7 +1226,7 @@ define([
 
             this.sldrGradient = new Common.UI.MultiSliderGradient({
                 el: $('#textart-slider-gradient'),
-                width: 125,
+                width: 192,
                 minValue: 0,
                 maxValue: 100,
                 values: [0, 100]
@@ -1236,6 +1238,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');
@@ -1252,18 +1256,60 @@ define([
                 me.GradColor.colors = colors;
                 me.GradColor.currentIdx = currentIdx;
             });
-            this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
-                me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
+            this.sldrGradient.on('addthumb', function(cmp, index, pos){
+                me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
                 me.GradColor.currentIdx = index;
-                me.sldrGradient.addNewThumb(index, color);
+                var color = me.sldrGradient.addNewThumb(index, pos);
+                me.GradColor.colors[me.GradColor.currentIdx] = color;
             });
             this.sldrGradient.on('removethumb', function(cmp, index){
                 me.sldrGradient.removeThumb(index);
                 me.GradColor.values.splice(index, 1);
                 me.sldrGradient.changeGradientStyle();
+                if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= me.GradColor.colors.length) {
+                    var newIndex = index > 0 ? index - 1 : index;
+                    newIndex = (newIndex === 0 && me.GradColor.values.length > 2) ? me.GradColor.values.length - 2 : newIndex;
+                    me.GradColor.currentIdx = newIndex;
+                }
+                me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
             });
             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;",
@@ -1586,6 +1632,63 @@ define([
             }
         },
 
+        onPositionChange: function(btn) {
+            var pos = btn.getNumberValue(),
+                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+                maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
+                needSort = pos < minValue || pos > maxValue;
+            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.asc_setGraphicObjectProps(this.imgprops);
+                if (needSort) {
+                    this.sldrGradient.sortThumbs();
+                    this.sldrGradient.trigger('change', this.sldrGradient);
+                    this.sldrGradient.trigger('changecomplete', this.sldrGradient);
+                }
+            }
+        },
+
+        onAddGradientStep: function() {
+            if (this.GradColor.colors.length > 9) return;
+            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;
+            var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
+            this.GradColor.colors[this.GradColor.currentIdx] = color;
+
+            this.sldrGradient.trigger('change', this.sldrGradient);
+            this.sldrGradient.trigger('changecomplete', this.sldrGradient);
+        },
+
+        onRemoveGradientStep: function() {
+            if (this.GradColor.values.length < 3) return;
+            var index = this.GradColor.currentIdx;
+            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) {
+                var newIndex = index > 0 ? index - 1 : index;
+                newIndex = (newIndex === 0 && this.GradColor.values.length > 2) ? this.GradColor.values.length - 2 : newIndex;
+                this.GradColor.currentIdx = newIndex;
+            }
+            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',
@@ -1626,6 +1729,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'
     }, SSE.Views.TextArtSettings || {}));
 });
diff --git a/apps/spreadsheeteditor/main/locale/en.json b/apps/spreadsheeteditor/main/locale/en.json
index 9b5d80dd2..fd18f39ac 100644
--- a/apps/spreadsheeteditor/main/locale/en.json
+++ b/apps/spreadsheeteditor/main/locale/en.json
@@ -1281,6 +1281,10 @@
   "SSE.Views.CellSettings.textControl": "Text Control",
   "SSE.Views.CellSettings.strWrap": "Wrap text",
   "SSE.Views.CellSettings.strShrink": "Shrink to fit",
+  "SSE.Views.CellSettings.textGradientColor": "Color",
+  "SSE.Views.CellSettings.textPosition": "Position",
+  "SSE.Views.CellSettings.tipAddGradientPoint": "Add gradient point",
+  "SSE.Views.CellSettings.tipRemoveGradientPoint": "Remove gradient point",
   "SSE.Views.ChartDataDialog.textTitle": "Chart Data",
   "SSE.Views.ChartDataDialog.textInvalidRange": "Invalid cells range",
   "SSE.Views.ChartDataDialog.textSelectData": "Select data",
@@ -2281,6 +2285,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",
@@ -2615,6 +2622,9 @@
   "SSE.Views.TextArtSettings.txtNoBorders": "No Line",
   "SSE.Views.TextArtSettings.txtPapyrus": "Papyrus",
   "SSE.Views.TextArtSettings.txtWood": "Wood",
+  "SSE.Views.TextArtSettings.textPosition": "Position",
+  "SSE.Views.TextArtSettings.tipAddGradientPoint": "Add gradient point",
+  "SSE.Views.TextArtSettings.tipRemoveGradientPoint": "Remove gradient point",
   "SSE.Views.Toolbar.capBtnAddComment": "Add Comment",
   "SSE.Views.Toolbar.capBtnComment": "Comment",
   "SSE.Views.Toolbar.capBtnInsHeader": "Header/Footer",
diff --git a/apps/spreadsheeteditor/main/resources/img/toolbar/1.25x/btn-add-breakpoint.png b/apps/spreadsheeteditor/main/resources/img/toolbar/1.25x/btn-add-breakpoint.png
new file mode 100644
index 000000000..66b94d208
Binary files /dev/null and b/apps/spreadsheeteditor/main/resources/img/toolbar/1.25x/btn-add-breakpoint.png differ
diff --git a/apps/spreadsheeteditor/main/resources/img/toolbar/1.25x/btn-remove-breakpoint.png b/apps/spreadsheeteditor/main/resources/img/toolbar/1.25x/btn-remove-breakpoint.png
new file mode 100644
index 000000000..fab4af0e4
Binary files /dev/null and b/apps/spreadsheeteditor/main/resources/img/toolbar/1.25x/btn-remove-breakpoint.png differ
diff --git a/apps/spreadsheeteditor/main/resources/img/toolbar/1.5x/btn-add-breakpoint.png b/apps/spreadsheeteditor/main/resources/img/toolbar/1.5x/btn-add-breakpoint.png
new file mode 100644
index 000000000..007cb20d9
Binary files /dev/null and b/apps/spreadsheeteditor/main/resources/img/toolbar/1.5x/btn-add-breakpoint.png differ
diff --git a/apps/spreadsheeteditor/main/resources/img/toolbar/1.5x/btn-remove-breakpoint.png b/apps/spreadsheeteditor/main/resources/img/toolbar/1.5x/btn-remove-breakpoint.png
new file mode 100644
index 000000000..66ab34e8a
Binary files /dev/null and b/apps/spreadsheeteditor/main/resources/img/toolbar/1.5x/btn-remove-breakpoint.png differ
diff --git a/apps/spreadsheeteditor/main/resources/img/toolbar/1.75x/btn-add-breakpoint.png b/apps/spreadsheeteditor/main/resources/img/toolbar/1.75x/btn-add-breakpoint.png
new file mode 100644
index 000000000..d089c5e6e
Binary files /dev/null and b/apps/spreadsheeteditor/main/resources/img/toolbar/1.75x/btn-add-breakpoint.png differ
diff --git a/apps/spreadsheeteditor/main/resources/img/toolbar/1.75x/btn-remove-breakpoint.png b/apps/spreadsheeteditor/main/resources/img/toolbar/1.75x/btn-remove-breakpoint.png
new file mode 100644
index 000000000..110bdbc6a
Binary files /dev/null and b/apps/spreadsheeteditor/main/resources/img/toolbar/1.75x/btn-remove-breakpoint.png differ
diff --git a/apps/spreadsheeteditor/main/resources/img/toolbar/1x/btn-add-breakpoint.png b/apps/spreadsheeteditor/main/resources/img/toolbar/1x/btn-add-breakpoint.png
new file mode 100644
index 000000000..6b6eda926
Binary files /dev/null and b/apps/spreadsheeteditor/main/resources/img/toolbar/1x/btn-add-breakpoint.png differ
diff --git a/apps/spreadsheeteditor/main/resources/img/toolbar/1x/btn-remove-breakpoint.png b/apps/spreadsheeteditor/main/resources/img/toolbar/1x/btn-remove-breakpoint.png
new file mode 100644
index 000000000..499033fc0
Binary files /dev/null and b/apps/spreadsheeteditor/main/resources/img/toolbar/1x/btn-remove-breakpoint.png differ
diff --git a/apps/spreadsheeteditor/main/resources/img/toolbar/2x/btn-add-breakpoint.png b/apps/spreadsheeteditor/main/resources/img/toolbar/2x/btn-add-breakpoint.png
new file mode 100644
index 000000000..c025ed145
Binary files /dev/null and b/apps/spreadsheeteditor/main/resources/img/toolbar/2x/btn-add-breakpoint.png differ
diff --git a/apps/spreadsheeteditor/main/resources/img/toolbar/2x/btn-remove-breakpoint.png b/apps/spreadsheeteditor/main/resources/img/toolbar/2x/btn-remove-breakpoint.png
new file mode 100644
index 000000000..f066ecac2
Binary files /dev/null and b/apps/spreadsheeteditor/main/resources/img/toolbar/2x/btn-remove-breakpoint.png differ