diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index c6a93f973d..e0b453c134 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -1371,7 +1371,10 @@ define([
                     restoreHeight: 174,
                     allowScrollbar: false,
                     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-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/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less
index 7844607ef0..b21cabe64d 100644
--- a/apps/documenteditor/main/resources/less/rightmenu.less
+++ b/apps/documenteditor/main/resources/less/rightmenu.less
@@ -39,7 +39,7 @@
 }
 
 .item-gradient {
-    .background-ximage-all('right-panels/gradients.png', 150px);
+    //.background-ximage-all('right-panels/gradients.png', 150px);
 
     width:50px;
     height:50px;
@@ -50,39 +50,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%);
 }
 
 #signature-requested-sign,