diff --git a/apps/common/main/lib/component/MultiSliderGradient.js b/apps/common/main/lib/component/MultiSliderGradient.js
index 8a12bef4b..8ad11eaff 100644
--- a/apps/common/main/lib/component/MultiSliderGradient.js
+++ b/apps/common/main/lib/component/MultiSliderGradient.js
@@ -54,7 +54,11 @@ define([
             maxValue: 100,
             values: [0, 100],
             colorValues: ['#000000', '#ffffff'],
-            currentThumb: 0
+            currentThumb: 0,
+            thumbTemplate: '<div class="thumb img-commonctrl" style="">' +
+                            '<div class="thumb-top"></div>' +
+                            '<div class="thumb-bottom"></div>' +
+                            '</div>'
         },
 
         disabled: false,
@@ -63,38 +67,20 @@ define([
             '<div class="slider multi-slider-gradient">',
             '<div class="track"></div>',
             '<% _.each(items, function(item) { %>',
-            '<div class="thumb img-commonctrl" style="">',
-                '<div class="thumb-top"></div>',
-                '<div class="thumb-bottom"></div>',
-            '</div>',
+            '<%= thumbTemplate %>',
             '<% }); %>',
             '</div>'
         ].join('')),
 
         initialize : function(options) {
-            this.styleStr = '';
-            if (Common.Utils.isChrome && Common.Utils.chromeVersion<10 || Common.Utils.isSafari && Common.Utils.safariVersion<5.1)
-                this.styleStr = '-webkit-gradient(linear, left top, right top, color-stop({1}%,{0}), color-stop({3}%,{2})); /* Chrome,Safari4+ */';
-            else if (Common.Utils.isChrome || Common.Utils.isSafari)
-                this.styleStr = '-webkit-linear-gradient(left, {0} {1}%, {2} {3}%)';
-            else if (Common.Utils.isGecko)
-                this.styleStr = '-moz-linear-gradient(left, {0} {1}%, {2} {3}%)';
-            else if (Common.Utils.isOpera && Common.Utils.operaVersion>11.0)
-                this.styleStr = '-o-linear-gradient(left, {0} {1}%, {2} {3}%)';
-            else if (Common.Utils.isIE)
-                this.styleStr = '-ms-linear-gradient(left, {0} {1}%, {2} {3}%)';
-
-            this.colorValues = this.options.colorValues;
-
+            this.styleStr = {};
             Common.UI.MultiSlider.prototype.initialize.call(this, options);
         },
 
         render : function(parentEl) {
             Common.UI.MultiSlider.prototype.render.call(this, parentEl);
 
-            var me = this,
-                style = '';
-
+            var me = this;
             me.trackEl = me.cmpEl.find('.track');
 
             for (var i=0; i<me.thumbs.length; i++) {
@@ -102,33 +88,24 @@ define([
                     me.trigger('thumbdblclick', me);
                 });
                 me.thumbs[i].thumbcolor = me.thumbs[i].thumb.find('> div');
+                me.setColorValue(me.options.colorValues[i], i);
             }
 
-            if (me.styleStr!=='') {
-                style = Common.Utils.String.format(me.styleStr, me.colorValues[0], 0, me.colorValues[1], 100);
-                me.trackEl.css('background', style);
-            }
-            if (Common.Utils.isIE) {
-                style = Common.Utils.String.format('progid:DXImageTransform.Microsoft.gradient( startColorstr={0}, endColorstr={1},GradientType=1 )',
-                    me.colorValues[0], me.colorValues[1]);
-                me.trackEl.css('filter', style);
-            }
-            style = Common.Utils.String.format('linear-gradient(to right, {0} {1}%, {2} {3}%)', me.colorValues[0], 0, me.colorValues[1], 100);
-            me.trackEl.css('background', style);
-
+            me.changeSliderStyle();
+            me.changeGradientStyle();
             me.on('change', _.bind(me.changeGradientStyle, me));
         },
 
         setColorValue: function(color, index) {
             var ind = (index!==undefined) ? index : this.currentThumb;
-            this.colorValues[ind] = color;
+            this.thumbs[ind].colorValue = color;
             this.thumbs[ind].thumbcolor.css('background-color', color);
             this.changeGradientStyle();
         },
 
         getColorValue: function(index) {
             var ind = (index!==undefined) ? index : this.currentThumb;
-            return this.colorValues[ind];
+            return this.thumbs[ind].colorValue;
         },
 
         setValue: function(index, value) {
@@ -136,32 +113,88 @@ define([
             this.changeGradientStyle();
         },
 
+        getColorValues: function() {
+            var values = [];
+            _.each (this.thumbs, function(thumb) {
+                values.push(thumb.colorValue);
+            });
+
+            return values;
+        },
+
         changeGradientStyle: function() {
             if (!this.rendered) return;
             var style;
-            if (this.styleStr!=='') {
-                style = Common.Utils.String.format(this.styleStr, this.colorValues[0], this.getValue(0), this.colorValues[1], this.getValue(1));
+            if (this.styleStr.specific) {
+                style = Common.Utils.String.format(this.styleStr.specific, this.getColorValues().concat(this.getValues()));
                 this.trackEl.css('background', style);
             }
             if (Common.Utils.isIE) {
                 style = Common.Utils.String.format('progid:DXImageTransform.Microsoft.gradient( startColorstr={0}, endColorstr={1},GradientType=1 )',
-                    this.colorValues[0], this.colorValues[1]);
+                    this.getColorValue(0), this.getColorValue(this.thumbs.length-1));
                 this.trackEl.css('filter', style);
             }
-            style = Common.Utils.String.format('linear-gradient(to right, {0} {1}%, {2} {3}%)',  this.colorValues[0], this.getValue(0), this.colorValues[1], this.getValue(1));
-            this.trackEl.css('background', style);
+            if (this.styleStr.common) {
+                style = Common.Utils.String.format(this.styleStr.common, this.getColorValues().concat(this.getValues()));
+                this.trackEl.css('background', style);
+            }
         },
 
         sortThumbs: function() {
-            var recalc_indexes = Common.UI.MultiSlider.prototype.sortThumbs.call(this),
-                new_colors = [],
-                me = this;
-            _.each (recalc_indexes, function(recalc_index) {
-                new_colors.push(me.colorValues[recalc_index]);
-            });
-            this.colorValues = new_colors;
-            this.trigger('sortthumbs', me, recalc_indexes);
+            var recalc_indexes = Common.UI.MultiSlider.prototype.sortThumbs.call(this);
+            this.trigger('sortthumbs', this, recalc_indexes);
             return recalc_indexes;
+        },
+
+        addThumb: function() {
+            Common.UI.MultiSlider.prototype.addThumb.call(this);
+
+            var me = this,
+                index = me.thumbs.length-1;
+            me.thumbs[index].thumb.on('dblclick', null, function() {
+                me.trigger('thumbdblclick', me);
+            });
+            me.thumbs[index].thumbcolor = me.thumbs[index].thumb.find('> div');
+            (index>0) && this.setColorValue(this.getColorValue(index-1), index);
+            me.changeSliderStyle();
+        },
+
+        removeThumb: function(index) {
+            if (index===undefined) index = this.thumbs.length-1;
+            if (index>0) {
+                this.thumbs[index].thumb.remove();
+                this.thumbs.splice(index, 1);
+                this.changeSliderStyle();
+            }
+        },
+
+        changeSliderStyle: function() {
+            this.styleStr = {
+                specific: '',
+                common: 'linear-gradient(to right'
+            };
+
+            if (Common.Utils.isChrome && Common.Utils.chromeVersion<10 || Common.Utils.isSafari && Common.Utils.safariVersion<5.1)
+                this.styleStr.specific = '-webkit-gradient(linear, left top, right top';  /* Chrome,Safari4+ */
+            else if (Common.Utils.isChrome || Common.Utils.isSafari)
+                this.styleStr.specific = '-webkit-linear-gradient(left';
+            else if (Common.Utils.isGecko)
+                this.styleStr.specific = '-moz-linear-gradient(left';
+            else if (Common.Utils.isOpera && Common.Utils.operaVersion>11.0)
+                this.styleStr.specific = '-o-linear-gradient(left';
+            else if (Common.Utils.isIE)
+                this.styleStr.specific = '-ms-linear-gradient(left';
+
+            for (var i=0; i<this.thumbs.length; i++) {
+                this.styleStr.common += ', {' + i + '} {' + (this.thumbs.length + i) + '}%';
+                if (Common.Utils.isChrome && Common.Utils.chromeVersion<10 || Common.Utils.isSafari && Common.Utils.safariVersion<5.1)
+                    this.styleStr.specific += ', color-stop({' + (this.thumbs.length + i) + '}%,{' + i + '})';
+                else
+                    this.styleStr.specific += ', {' + i + '} {' + (this.thumbs.length + i) + '}%';
+
+            }
+            this.styleStr.specific += ')';
+            this.styleStr.common += ')';
         }
     });
 });
diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js
index b82ca9372..d11430466 100644
--- a/apps/common/main/lib/component/Slider.js
+++ b/apps/common/main/lib/component/Slider.js
@@ -277,7 +277,8 @@ define([
             width: 100,
             minValue: 0,
             maxValue: 100,
-            values: [0, 100]
+            values: [0, 100],
+            thumbTemplate: '<div class="thumb" style=""></div>'
         },
 
         disabled: false,
@@ -290,7 +291,7 @@ define([
                     '<div class="track-right" style=""></div>',
                 '</div>',
                 '<% _.each(items, function(item) { %>',
-                '<div class="thumb" style=""></div>',
+                '<%= thumbTemplate %>',
                 '<% }); %>',
             '</div>'
         ].join('')),
@@ -317,7 +318,8 @@ define([
 
             if (!me.rendered) {
                 this.cmpEl = $(this.template({
-                    items: this.options.values
+                    items: this.options.values,
+                    thumbTemplate: this.options.thumbTemplate
                 }));
 
                 if (parentEl) {
@@ -353,8 +355,8 @@ define([
                 if (need_sort)
                     me.sortThumbs();
 
-                $(document).off('mouseup', onMouseUp);
-                $(document).off('mousemove', onMouseMove);
+                $(document).off('mouseup', me.binding.onMouseUp);
+                $(document).off('mousemove', me.binding.onMouseMove);
 
                 me._dragstart = undefined;
                 me.trigger('changecomplete', me, value, lastValue);
@@ -399,8 +401,8 @@ define([
                     (index == idx) ? item.thumb.css('z-index', 500) : item.thumb.css('z-index', '');
                 });
 
-                $(document).on('mouseup', null, e.data, onMouseUp);
-                $(document).on('mousemove', null, e.data, onMouseMove);
+                $(document).on('mouseup', null, e.data, me.binding.onMouseUp);
+                $(document).on('mousemove', null, e.data, me.binding.onMouseMove);
             };
 
             var onTrackMouseDown = function (e) {
@@ -443,6 +445,12 @@ define([
                 return index;
             };
 
+            this.binding = {
+                onMouseUp:   _.bind(onMouseUp, this),
+                onMouseMove: _.bind(onMouseMove, this),
+                onMouseDown: _.bind(onMouseDown, this)
+            };
+
             this.$thumbs = el.find('.thumb');
             _.each(this.$thumbs, function(item, index) {
                 var thumb = $(item);
@@ -451,7 +459,7 @@ define([
                     index: index
                 });
                 me.setValue(index, me.options.values[index]);
-                thumb.on('mousedown', null, me.thumbs[index], onMouseDown);
+                thumb.on('mousedown', null, me.thumbs[index], me.binding.onMouseDown);
             });
             me.setActiveThumb(0, true);
 
@@ -481,7 +489,6 @@ define([
             this.setThumbPosition(index, Math.round((value-this.minValue)*this.delta));
         },
 
-
         getValue: function(index) {
             return this.thumbs[index].value;
         },
@@ -511,6 +518,35 @@ define([
                 thumb.index = index;
             });
             return recalc_indexes;
+        },
+
+        setThumbs: function(count) {
+            var length = this.thumbs.length;
+            if (length==count) return;
+
+            for (var i=0; i<Math.abs(count-length); i++)
+                (length<count) ? this.addThumb() : this.removeThumb();
+        },
+
+        addThumb: function() {
+            var el = this.cmpEl,
+                thumb = $(this.options.thumbTemplate),
+                index = this.thumbs.length;
+            el.append(thumb);
+            this.thumbs.push({
+                thumb: thumb,
+                index: index
+            });
+            (index>0) && this.setValue(index, this.getValue(index-1));
+            thumb.on('mousedown', null, this.thumbs[index], this.binding.onMouseDown);
+        },
+
+        removeThumb: function(index) {
+            if (index===undefined) index = this.thumbs.length-1;
+            if (index>0) {
+                this.thumbs[index].thumb.remove();
+                this.thumbs.splice(index, 1);
+            }
         }
     });
 });
diff --git a/apps/common/main/lib/util/utils.js b/apps/common/main/lib/util/utils.js
index f87d958ac..3a5251b23 100644
--- a/apps/common/main/lib/util/utils.js
+++ b/apps/common/main/lib/util/utils.js
@@ -542,6 +542,8 @@ Common.Utils.String = new (function() {
     return {
         format: function(format) {
             var args = _.toArray(arguments).slice(1);
+            if (args.length && typeof args[0] == 'object')
+                args = args[0];
             return format.replace(/\{(\d+)\}/g, function(s, i) {
                 return args[i];
             });
diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index b7079382f..dfc2ab111 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -182,6 +182,8 @@ define([
                             fill.get_fill().put_linear_scale(true);
                         }
                         if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_GRAD) {
+                            this.GradColor.values = [0, 100];
+                            this.GradColor.colors = [this.GradColor.colors[0], this.GradColor.colors[this.GradColor.colors.length - 1]];
                             var HexColor0 = Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[0]).get_color().get_hex(),
                                 HexColor1 = Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[1]).get_color().get_hex();
 
@@ -486,14 +488,22 @@ define([
                 fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD);
                 fill.put_fill( new Asc.asc_CFillGrad());
                 fill.get_fill().put_grad_type(this.GradFillType);
-                fill.get_fill().put_colors([Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[0]), Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[1])]);
+                var arr = [];
+                this.GradColor.colors.forEach(function(item){
+                    arr.push(Common.Utils.ThemeColor.getRgbColor(item));
+                });
+                fill.get_fill().put_colors(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);
                     }
-                    fill.get_fill().put_positions([this.GradColor.values[0]*1000, this.GradColor.values[1]*1000]);
+                    arr = [];
+                    this.GradColor.values.forEach(function(item){
+                        arr.push(item*1000);
+                    });
+                    fill.get_fill().put_positions(arr);
                 }
                 props.put_fill(fill);
                 this.imgprops.put_ShapeProperties(props);
@@ -531,14 +541,22 @@ define([
                 fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD);
                 fill.put_fill( new Asc.asc_CFillGrad());
                 fill.get_fill().put_grad_type(this.GradFillType);
-                fill.get_fill().put_positions([this.GradColor.values[0]*1000, this.GradColor.values[1]*1000]);
+                var arr = [];
+                this.GradColor.values.forEach(function(item){
+                    arr.push(item*1000);
+                });
+                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);
                     }
-                    fill.get_fill().put_colors([Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[0]), Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[1])]);
+                    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);
@@ -826,7 +844,7 @@ define([
                     this.FGColor = (this.ShapeColor.Color!=='transparent') ? {Value: 1, Color: Common.Utils.ThemeColor.colorValue2EffectId(this.ShapeColor.Color)} : {Value: 1, Color: '000000'};
                     this.BGColor = {Value: 1, Color: 'ffffff'};
                     this.GradColor.colors[0] = (this.ShapeColor.Color!=='transparent') ? Common.Utils.ThemeColor.colorValue2EffectId(this.ShapeColor.Color) : '000000';
-                    this.GradColor.colors[1] = 'ffffff';
+                    this.GradColor.colors[this.GradColor.colors.length-1] = 'ffffff';
                 }  else if (fill_type==Asc.c_oAscFill.FILL_TYPE_BLIP) {
                     fill = fill.get_fill();
                     this.BlipFillType = fill.get_type(); // null - не совпадают у нескольких фигур
@@ -874,7 +892,7 @@ define([
                     this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_PATT;
                     this.ShapeColor = {Value: 1, Color: Common.Utils.ThemeColor.colorValue2EffectId(this.FGColor.Color)};
                     this.GradColor.colors[0] = Common.Utils.ThemeColor.colorValue2EffectId(this.FGColor.Color);
-                    this.GradColor.colors[1] = 'ffffff';
+                    this.GradColor.colors[this.GradColor.colors.length-1] = 'ffffff';
                 } else if (fill_type==Asc.c_oAscFill.FILL_TYPE_GRAD) {
                     fill = fill.get_fill();
                     var gradfilltype = fill.get_grad_type();  // null - не совпадают у нескольких фигур
@@ -905,49 +923,37 @@ define([
                         }
                     }
 
-                    var colors = fill.get_colors();
-                    if (colors && colors.length>0) {
-                        color = colors[0];
+                    var me = this;
+                    var colors = fill.get_colors(),
+                        positions = fill.get_positions(),
+                        length = colors.length;
+                    this.sldrGradient.setThumbs(length);
+                    if (this.GradColor.colors.length>length) {
+                        this.GradColor.colors.splice(length, this.GradColor.colors.length - length);
+                        this.GradColor.values.splice(length, this.GradColor.colors.length - length);
+                        this.GradColor.currentIdx = 0;
+                    }
+                    colors && colors.forEach(function(color, index) {
                         if (color) {
                             if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
-                                this.GradColor.colors[0] = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value()};
-                                Common.Utils.ThemeColor.colorValue2EffectId(this.GradColor.colors[0]);
+                                me.GradColor.colors[index] = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value()};
+                                Common.Utils.ThemeColor.colorValue2EffectId(me.GradColor.colors[index]);
                             } else {
-                                this.GradColor.colors[0] = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
+                                me.GradColor.colors[index] = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
                             }
                         } else
-                            this.GradColor.colors[0] = '000000';
+                            me.GradColor.colors[index] = '000000';
 
-                        color = colors[1];
-                        if (color) {
-                            if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
-                                this.GradColor.colors[1] = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value()};
-                                Common.Utils.ThemeColor.colorValue2EffectId(this.GradColor.colors[1]);
-                            } else {
-                                this.GradColor.colors[1] = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
-                            }
-                        } else
-                            this.GradColor.colors[1] = 'ffffff';
-
-                    }
-                    var positions = fill.get_positions();
-                    if (positions && positions.length>0) {
-                        var position = positions[0];
+                        var position = positions[index];
                         if (position!==null)       {
                             position = position/1000;
-                            this.GradColor.values[0] = position;
-                        }
-
-                        position = positions[1];
-                        if (position!==null)       {
-                            position = position/1000;
-                            this.GradColor.values[1] = position;
+                            me.GradColor.values[index] = position;
                         }
+                    });
+                    for (var index=0; index<length; index++) {
+                        me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index);
+                        me.sldrGradient.setValue(index, me.GradColor.values[index]);
                     }
-                    this.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(this.GradColor.colors[0]) == 'object') ? this.GradColor.colors[0].color : this.GradColor.colors[0]), 0);
-                    this.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(this.GradColor.colors[1]) == 'object') ? this.GradColor.colors[1].color : this.GradColor.colors[1]), 1);
-                    this.sldrGradient.setValue(0, this.GradColor.values[0]);
-                    this.sldrGradient.setValue(1, this.GradColor.values[1]);
                     this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
                     this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
                     this.BGColor = {Value: 1, Color: 'ffffff'};