diff --git a/apps/common/main/lib/component/MultiSliderGradient.js b/apps/common/main/lib/component/MultiSliderGradient.js
index 8ad11eaff..71a5bf3a6 100644
--- a/apps/common/main/lib/component/MultiSliderGradient.js
+++ b/apps/common/main/lib/component/MultiSliderGradient.js
@@ -159,11 +159,21 @@ define([
             me.changeSliderStyle();
         },
 
+        addNewThumb: function(index, color) {
+            var me = this;
+            me.thumbs[index].thumbcolor = me.thumbs[index].thumb.find('> div');
+            (index>0) && this.setColorValue(color, index);
+            me.sortThumbs();
+            me.changeSliderStyle();
+            me.changeGradientStyle();
+        },
+
         removeThumb: function(index) {
             if (index===undefined) index = this.thumbs.length-1;
-            if (index>0) {
+            if (this.thumbs.length > 2) {
                 this.thumbs[index].thumb.remove();
                 this.thumbs.splice(index, 1);
+                this.sortThumbs();
                 this.changeSliderStyle();
             }
         },
diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js
index 0ee059b7e..00e54d0d0 100644
--- a/apps/common/main/lib/component/Slider.js
+++ b/apps/common/main/lib/component/Slider.js
@@ -347,17 +347,28 @@ define([
                     pos = Math.max(0, Math.min(100, position)),
                     value = pos/me.delta + me.minValue;
 
-                me.setThumbPosition(index, pos);
-                me.thumbs[index].value = value;
+                if (me.isRemoveThumb) {
+                    if (me.thumbs.length < 3) {
+                        $(document).off('mouseup', me.binding.onMouseUp);
+                        $(document).off('mousemove', me.binding.onMouseMove);
+                        return;
+                    }
+                    me.trigger('removethumb', me, _.findIndex(me.thumbs, {index: index}));
+                    me.trigger('changecomplete', me, value, lastValue);
+                } else {
+                    me.setThumbPosition(index, pos);
+                    me.thumbs[index].value = value;
 
-                if (need_sort)
-                    me.sortThumbs();
+                    if (need_sort)
+                        me.sortThumbs();
+                }
 
                 $(document).off('mouseup', me.binding.onMouseUp);
                 $(document).off('mousemove', me.binding.onMouseMove);
 
                 me._dragstart = undefined;
-                me.trigger('changecomplete', me, value, lastValue);
+                !me.isRemoveThumb && me.trigger('changecomplete', me, value, lastValue);
+                me.isRemoveThumb = undefined;
             };
 
             var onMouseMove = function (e) {
@@ -382,6 +393,10 @@ define([
                 if (need_sort)
                     me.sortThumbs();
 
+                var positionY = e.pageY*Common.Utils.zoom() - me.cmpEl.offset().top;
+                me.isRemoveThumb = positionY > me.cmpEl.height() || positionY < 0;
+                me.setRemoveThumb(index, me.isRemoveThumb);
+
                 if (Math.abs(value-lastValue)>0.001)
                     me.trigger('change', me, value, lastValue);
             };
@@ -403,7 +418,25 @@ define([
                 $(document).on('mousemove', null, e.data, me.binding.onMouseMove);
             };
 
-            var onTrackMouseDown = function (e) {
+            var onTrackMouseUp = function (e) {
+                if ( me.disabled || !_.isUndefined(me._dragstart) || me.thumbs.length > 9) return;
+
+                var pos = Math.max(0, Math.min(100, (Math.round((e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left) / me.width * 100)))),
+                    nearIndex = findThumb(pos),
+                    thumbColor = me.thumbs[nearIndex].colorValue,
+                    thumbValue = me.thumbs[nearIndex].value,
+                    value = pos/me.delta + me.minValue;
+                me.addThumb();
+                var index = me.thumbs.length - 1;
+                me.setThumbPosition(index, pos);
+                me.thumbs[index].value = value;
+                me.trigger('addthumb', me, index, nearIndex, thumbColor);
+
+                me.trigger('change', me);
+                me.trigger('changecomplete', me);
+            };
+
+            /*var onTrackMouseDown = function (e) {
                 if ( me.disabled ) return;
 
                 var pos = Math.max(0, Math.min(100, (Math.round((e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left) / me.width * 100)))),
@@ -416,7 +449,7 @@ define([
 
                 me.trigger('change', me, value, lastValue);
                 me.trigger('changecomplete', me, value, lastValue);
-            };
+            };*/
 
             var findThumb = function(pos) {
                 var nearest = 100,
@@ -462,7 +495,8 @@ define([
             me.setActiveThumb(0, true);
 
             if (!me.rendered) {
-                el.on('mousedown', '.track', onTrackMouseDown);
+                /*el.on('mousedown', '.track', onTrackMouseDown);*/
+                el.on('mouseup', '.track', onTrackMouseUp);
             }
 
             me.rendered = true;
@@ -472,11 +506,23 @@ define([
 
         setActiveThumb: function(index, suspend) {
             this.currentThumb = index;
+            this.$thumbs = this.cmpEl.find('.thumb');
             this.$thumbs.removeClass('active');
             this.thumbs[index].thumb.addClass('active');
             if (suspend!==true) this.trigger('thumbclick', this, index);
         },
 
+        setRemoveThumb: function(index, remove) {
+            var ind = _.findIndex(this.thumbs, {index: index});
+            if (ind !== -1) {
+                if (remove && this.thumbs.length > 2) {
+                    this.$el.find('.active').addClass('remove');
+                } else {
+                    this.$el.find('.remove').removeClass('remove');
+                }
+            }
+        },
+
         setThumbPosition: function(index, x) {
             this.thumbs[index].position = x;
             this.thumbs[index].thumb.css({left: x + '%'});
diff --git a/apps/common/main/resources/less/multislider-gradient.less b/apps/common/main/resources/less/multislider-gradient.less
index d42350d94..562f15b8f 100644
--- a/apps/common/main/resources/less/multislider-gradient.less
+++ b/apps/common/main/resources/less/multislider-gradient.less
@@ -40,6 +40,10 @@
         &.active .thumb-bottom {
             border-bottom-width: 2px;
         }
+
+        &.remove {
+            opacity: 0.5;
+        }
     }
 
     .track {
diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index 1d227611a..76c98258b 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -550,17 +550,16 @@ define([
                 });
                 fill.get_fill().put_positions(arr);
 
-                if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_GRAD) {
-                    if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
-                        fill.get_fill().put_linear_angle(this.GradLinearDirectionType * 60000);
-                        fill.get_fill().put_linear_scale(true);
-                    }
-                    arr = [];
-                    this.GradColor.colors.forEach(function(item){
-                        arr.push(Common.Utils.ThemeColor.getRgbColor(item));
-                    });
-                    fill.get_fill().put_colors(arr);
+                if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
+                    fill.get_fill().put_linear_angle(this.GradLinearDirectionType * 60000);
+                    fill.get_fill().put_linear_scale(true);
                 }
+                arr = [];
+                this.GradColor.colors.forEach(function(item){
+                    arr.push(Common.Utils.ThemeColor.getRgbColor(item));
+                });
+                fill.get_fill().put_colors(arr);
+
                 props.put_fill(fill);
                 this.imgprops.put_ShapeProperties(props);
                 this.api.ImgApply(this.imgprops);
@@ -958,6 +957,10 @@ define([
                         me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index);
                         me.sldrGradient.setValue(index, me.GradColor.values[index]);
                     }
+                    if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
+                        me.GradColor.currentIdx = 0;
+                    }
+                    me.sldrGradient.setActiveThumb(me.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'};
@@ -1357,6 +1360,16 @@ 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];
+                me.GradColor.currentIdx = index;
+                me.sldrGradient.addNewThumb(index, color);
+            });
+            this.sldrGradient.on('removethumb', function(cmp, index){
+                me.sldrGradient.removeThumb(index);
+                me.GradColor.values.splice(index, 1);
+                me.sldrGradient.changeGradientStyle();
+            });
             this.fillControls.push(this.sldrGradient);
 
             this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
diff --git a/apps/documenteditor/main/app/view/TextArtSettings.js b/apps/documenteditor/main/app/view/TextArtSettings.js
index 4613bf022..89600a6df 100644
--- a/apps/documenteditor/main/app/view/TextArtSettings.js
+++ b/apps/documenteditor/main/app/view/TextArtSettings.js
@@ -650,6 +650,10 @@ define([
                         me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index);
                         me.sldrGradient.setValue(index, me.GradColor.values[index]);
                     }
+                    if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
+                        me.GradColor.currentIdx = 0;
+                    }
+                    me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
                     this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
                     this.ShapeColor = {Value: 1, Color: this.GradColor.colors[0]};
                 }
@@ -944,6 +948,16 @@ 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];
+                me.GradColor.currentIdx = index;
+                me.sldrGradient.addNewThumb(index, color);
+            });
+            this.sldrGradient.on('removethumb', function(cmp, index){
+                me.sldrGradient.removeThumb(index);
+                me.GradColor.values.splice(index, 1);
+                me.sldrGradient.changeGradientStyle();
+            });
             this.lockedControls.push(this.sldrGradient);
 
             this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js
index 0ab44f978..3043c455a 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettings.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettings.js
@@ -531,17 +531,16 @@ define([
                 });
                 fill.get_fill().put_positions(arr);
 
-                if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_GRAD) {
-                    if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
-                        fill.get_fill().put_linear_angle(this.GradLinearDirectionType * 60000);
-                        fill.get_fill().put_linear_scale(true);
-                    }
-                    arr = [];
-                    this.GradColor.colors.forEach(function(item){
-                        arr.push(Common.Utils.ThemeColor.getRgbColor(item));
-                    });
-                    fill.get_fill().put_colors(arr);
+                if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
+                    fill.get_fill().put_linear_angle(this.GradLinearDirectionType * 60000);
+                    fill.get_fill().put_linear_scale(true);
                 }
+                arr = [];
+                this.GradColor.colors.forEach(function(item){
+                    arr.push(Common.Utils.ThemeColor.getRgbColor(item));
+                });
+                fill.get_fill().put_colors(arr);
+                
                 props.put_fill(fill);
                 this.api.ShapeApply(props);
                 this._sliderChanged = false;
@@ -871,6 +870,10 @@ define([
                         me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index);
                         me.sldrGradient.setValue(index, me.GradColor.values[index]);
                     }
+                    if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
+                        me.GradColor.currentIdx = 0;
+                    }
+                    me.sldrGradient.setActiveThumb(me.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'};
@@ -1269,6 +1272,16 @@ 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];
+                me.GradColor.currentIdx = index;
+                me.sldrGradient.addNewThumb(index, color);
+            });
+            this.sldrGradient.on('removethumb', function(cmp, index){
+                me.sldrGradient.removeThumb(index);
+                me.GradColor.values.splice(index, 1);
+                me.sldrGradient.changeGradientStyle();
+            });
             this.fillControls.push(this.sldrGradient);
 
             this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
diff --git a/apps/presentationeditor/main/app/view/SlideSettings.js b/apps/presentationeditor/main/app/view/SlideSettings.js
index f71abc046..11ef1102a 100644
--- a/apps/presentationeditor/main/app/view/SlideSettings.js
+++ b/apps/presentationeditor/main/app/view/SlideSettings.js
@@ -804,6 +804,16 @@ 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];
+                me.GradColor.currentIdx = index;
+                me.sldrGradient.addNewThumb(index, color);
+            });
+            this.sldrGradient.on('removethumb', function(cmp, index){
+                me.sldrGradient.removeThumb(index);
+                me.GradColor.values.splice(index, 1);
+                me.sldrGradient.changeGradientStyle();
+            });
             this.FillItems.push(this.sldrGradient);
 
         },
@@ -1282,6 +1292,10 @@ define([
                         me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index);
                         me.sldrGradient.setValue(index, me.GradColor.values[index]);
                     }
+                    if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
+                        me.GradColor.currentIdx = 0;
+                    }
+                    me.sldrGradient.setActiveThumb(me.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'};
diff --git a/apps/presentationeditor/main/app/view/TextArtSettings.js b/apps/presentationeditor/main/app/view/TextArtSettings.js
index 7d1690829..04a9f738a 100644
--- a/apps/presentationeditor/main/app/view/TextArtSettings.js
+++ b/apps/presentationeditor/main/app/view/TextArtSettings.js
@@ -846,6 +846,10 @@ define([
                         me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index);
                         me.sldrGradient.setValue(index, me.GradColor.values[index]);
                     }
+                    if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
+                        me.GradColor.currentIdx = 0;
+                    }
+                    me.sldrGradient.setActiveThumb(me.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'};
@@ -1253,6 +1257,16 @@ 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];
+                me.GradColor.currentIdx = index;
+                me.sldrGradient.addNewThumb(index, color);
+            });
+            this.sldrGradient.on('removethumb', function(cmp, index){
+                me.sldrGradient.removeThumb(index);
+                me.GradColor.values.splice(index, 1);
+                me.sldrGradient.changeGradientStyle();
+            });
             this.lockedControls.push(this.sldrGradient);
 
             this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
index 2a5281b4a..6585349ca 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
@@ -546,17 +546,16 @@ define([
                 });
                 fill.asc_getFill().asc_putPositions(arr);
 
-                if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_GRAD) {
-                    if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
-                        fill.asc_getFill().asc_putLinearAngle(this.GradLinearDirectionType * 60000);
-                        fill.asc_getFill().asc_putLinearScale(true);
-                    }
-                    arr = [];
-                    this.GradColor.colors.forEach(function(item){
-                        arr.push(Common.Utils.ThemeColor.getRgbColor(item));
-                    });
-                    fill.asc_getFill().asc_putColors(arr);
+                if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
+                    fill.asc_getFill().asc_putLinearAngle(this.GradLinearDirectionType * 60000);
+                    fill.asc_getFill().asc_putLinearScale(true);
                 }
+                arr = [];
+                this.GradColor.colors.forEach(function(item){
+                    arr.push(Common.Utils.ThemeColor.getRgbColor(item));
+                });
+                fill.asc_getFill().asc_putColors(arr);
+
                 props.asc_putFill(fill);
                 this.imgprops.asc_putShapeProperties(props);
                 this.api.asc_setGraphicObjectProps(this.imgprops);
@@ -895,6 +894,10 @@ define([
                         me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index);
                         me.sldrGradient.setValue(index, me.GradColor.values[index]);
                     }
+                    if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
+                        me.GradColor.currentIdx = 0;
+                    }
+                    me.sldrGradient.setActiveThumb(me.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'};
@@ -1293,6 +1296,16 @@ 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];
+                me.GradColor.currentIdx = index;
+                me.sldrGradient.addNewThumb(index, color);
+            });
+            this.sldrGradient.on('removethumb', function(cmp, index){
+                me.sldrGradient.removeThumb(index);
+                me.GradColor.values.splice(index, 1);
+                me.sldrGradient.changeGradientStyle();
+            });
             this.fillControls.push(this.sldrGradient);
 
             this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
diff --git a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js
index d3d6291d7..9ce20f43e 100644
--- a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js
@@ -850,6 +850,10 @@ define([
                         me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index);
                         me.sldrGradient.setValue(index, me.GradColor.values[index]);
                     }
+                    if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
+                        me.GradColor.currentIdx = 0;
+                    }
+                    me.sldrGradient.setActiveThumb(me.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'};
@@ -1257,6 +1261,16 @@ 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];
+                me.GradColor.currentIdx = index;
+                me.sldrGradient.addNewThumb(index, color);
+            });
+            this.sldrGradient.on('removethumb', function(cmp, index){
+                me.sldrGradient.removeThumb(index);
+                me.GradColor.values.splice(index, 1);
+                me.sldrGradient.changeGradientStyle();
+            });
             this.lockedControls.push(this.sldrGradient);
 
             this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({