diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js
index 5ecb19a7d..6479b17a7 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettings.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettings.js
@@ -1284,7 +1284,9 @@ define([
                     parentMenu: btn.menu,
                     restoreHeight: 174,
                     store: new Common.UI.DataViewStore(me._viewDataLinear),
-                    itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+                    itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background: '
+                        +'<% if(type!=2) {%>linear-gradient(<%= type + 90 %>deg,#000, #fff)'
+                        +' <%} else {%> radial-gradient( #000 , #fff 70%) <%}%>;"></div>')
                 });
             });
             this.btnDirection.render($('#shape-button-direction'));
diff --git a/apps/presentationeditor/main/app/view/SlideSettings.js b/apps/presentationeditor/main/app/view/SlideSettings.js
index dc80ccb8b..f52c916d6 100644
--- a/apps/presentationeditor/main/app/view/SlideSettings.js
+++ b/apps/presentationeditor/main/app/view/SlideSettings.js
@@ -791,7 +791,9 @@ define([
                     parentMenu: btn.menu,
                     restoreHeight: 174,
                     store: new Common.UI.DataViewStore(me._viewDataLinear),
-                    itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+                    itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background: '
+                        +'<% if(type!=2) {%>linear-gradient(<%= type + 90 %>deg,#000, #fff)'
+                        +' <%} else {%> radial-gradient( #000 , #fff 70%) <%}%>;"></div>')
                 });
             });
             this.btnDirection.render($('#slide-button-direction'));
diff --git a/apps/presentationeditor/main/resources/less/rightmenu.less b/apps/presentationeditor/main/resources/less/rightmenu.less
index 0a576902f..25bedd9ef 100644
--- a/apps/presentationeditor/main/resources/less/rightmenu.less
+++ b/apps/presentationeditor/main/resources/less/rightmenu.less
@@ -33,7 +33,7 @@
 }
 
 .item-gradient {
-    .background-ximage-all('right-panels/gradients.png', 150px);
+    //.background-ximage-all('right-panels/gradients.png', 150px);
     width:50px;
     height:50px;
 }
@@ -42,40 +42,53 @@
     margin-right: 62px !important;
 }
 
+.item-gradient-separator {
+    margin-right: 62px !important;
+}
+
 .gradient-left-top {
-    background-position: 0 0;
+    //background-position: 0 0;
+    background: linear-gradient(to bottom right, #000, #fff);
 }
 
 .gradient-top {
-    background-position: -50px 0;
+    //background-position: -50px 0;
+    background: linear-gradient(to bottom, #000, #fff);
 }
 
 .gradient-right-top {
-    background-position: -100px 0;
+    //background-position: -100px 0;
+    background: linear-gradient(to bottom left, #000, #fff);
 }
 
 .gradient-left {
-    background-position: 0 -50px;
+    //background-position: 0 -50px;
+    background: linear-gradient(to right, #000, #fff);
 }
 
 .gradient-right {
-    background-position: -100px -50px;
+    //background-position: -100px -50px;
+    background: linear-gradient(to left, #000, #fff);
 }
 
 .gradient-left-bottom {
-    background-position: 0 -100px;
+    //background-position: 0 -100px;
+    background: linear-gradient(to top right, #000, #fff);
 }
 
 .gradient-bottom {
-    background-position: -50px -100px;
+    // background-position: -50px -100px;
+    background: linear-gradient(to top, #000, #fff);
 }
 
 .gradient-right-bottom {
-    background-position: -100px -100px;
+    //background-position: -100px -100px;
+    background: linear-gradient(to top left, #000, #fff);
 }
 
 .gradient-radial-center {
-    background-position: -100px -150px;
+    //background-position: -100px -150px;
+    background: radial-gradient( #000 , #fff 70%);
 }
 
 #signature-requested-sign,
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
index 909df6986..da203e13b 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
@@ -1310,7 +1310,9 @@ define([
                     parentMenu: btn.menu,
                     restoreHeight: 174,
                     store: new Common.UI.DataViewStore(me._viewDataLinear),
-                    itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
+                    itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background: '
+                        +'<% if(type!=2) {%>linear-gradient(<%= type + 90 %>deg,#000, #fff)'
+                        +' <%} else {%> radial-gradient( #000 , #fff 70%) <%}%>;"></div>')
                 });
             });
             this.btnDirection.render($('#shape-button-direction'));
diff --git a/apps/spreadsheeteditor/main/resources/less/rightmenu.less b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
index ea4e49a78..a85f1e3af 100644
--- a/apps/spreadsheeteditor/main/resources/less/rightmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
@@ -27,7 +27,7 @@
 }
 
 .item-gradient {
-    .background-ximage-all('right-panels/gradients.png', 150px);
+    //.background-ximage-all('right-panels/gradients.png', 150px);
     width:50px;
     height:50px;
 }
@@ -37,39 +37,48 @@
 }
 
 .gradient-left-top {
-    background-position: 0 0;
+    //background-position: 0 0;
+    background: linear-gradient(to bottom right, #000, #fff);
 }
 
 .gradient-top {
-    background-position: -50px 0;
+    //background-position: -50px 0;
+    background: linear-gradient(to bottom, #000, #fff);
 }
 
 .gradient-right-top {
-    background-position: -100px 0;
+    //background-position: -100px 0;
+    background: linear-gradient(to bottom left, #000, #fff);
 }
 
 .gradient-left {
-    background-position: 0 -50px;
+    //background-position: 0 -50px;
+    background: linear-gradient(to right, #000, #fff);
 }
 
 .gradient-right {
-    background-position: -100px -50px;
+    //background-position: -100px -50px;
+    background: linear-gradient(to left, #000, #fff);
 }
 
 .gradient-left-bottom {
-    background-position: 0 -100px;
+    //background-position: 0 -100px;
+    background: linear-gradient(to top right, #000, #fff);
 }
 
 .gradient-bottom {
-    background-position: -50px -100px;
+    // background-position: -50px -100px;
+    background: linear-gradient(to top, #000, #fff);
 }
 
 .gradient-right-bottom {
-    background-position: -100px -100px;
+    //background-position: -100px -100px;
+    background: linear-gradient(to top left, #000, #fff);
 }
 
 .gradient-radial-center {
-    background-position: -100px -150px;
+    //background-position: -100px -150px;
+    background: radial-gradient( #000 , #fff 70%);
 }
 
 .item-wrap {