diff --git a/src/main/frontend/colors.cljs b/src/main/frontend/colors.cljs
index 52515375b2..e7a77ad68b 100644
--- a/src/main/frontend/colors.cljs
+++ b/src/main/frontend/colors.cljs
@@ -60,5 +60,19 @@
   (when-let [style-tag (js/document.querySelector "style#color-variables")]
     (js/document.head.removeChild style-tag)))
 
-
+  
+(defn linear-gradient [color-name color-stop gradient-level]
+  (let [color-index (.indexOf color-list color-name) 
+        step (fn [dist] 
+               (str "var(--rx-"
+                 (name (nth color-list (mod (+ color-index dist) (count color-list))))
+                 "-" (name color-stop) ")"))]
+    (case gradient-level 
+      2 (str "linear-gradient(-45deg, " (step -1) " -50%, " (step 0) " 50%, " (step 1) " 150%)")
+      3 (str "linear-gradient(-45deg, " (step -1) " 0%, " (step 0) " 50%, " (step 1) " 100%)")
+      4 (str "linear-gradient(-45deg, " (step -2) " -16.66%, " (step -1) " 16.66%, " (step 0) " 50%, " (step 1) " 83.33%, " (step 2) " 116.66%)") 
+      5 (str "linear-gradient(-45deg, " (step -2) " 0%, " (step -1) " 25%, " (step 0) " 50%, " (step 1) " 75%, " (step 2) " 100%)")
+      6 (str "linear-gradient(-45deg, " (step -3) " -10%, " (step -2) " 10%, " (step -1) " 30%, " (step 0) " 50%, " (step 1) " 70%, " (step 2) " 90%, " (step 3) " 110%)")
+      7 (str "linear-gradient(-45deg, " (step -3) " 0%, " (step -2) " 16.66%, " (step -1) " 33.33%, " (step 0) " 50%, " (step 1) " 66.66%, " (step 2) " 83.33%, " (step 3) " 100%)")
+      (str "linear-gradient(90deg, " (step 0) ", " (step 0) ")"))))
 
diff --git a/src/main/frontend/shui.cljs b/src/main/frontend/shui.cljs
index a4b096a4a7..5caa74350d 100644
--- a/src/main/frontend/shui.cljs
+++ b/src/main/frontend/shui.cljs
@@ -39,5 +39,6 @@
                   :get-block-and-children db/get-block-and-children
                   :get-block-children db/get-block-children
                   :get-page-blocks-no-cache db/get-page-blocks-no-cache
-                  :get-page db/get-page})))
+                  :get-page db/get-page
+                  :linear-gradient colors/linear-gradient})))