diff --git a/frontend/src/app/main/ui/shapes/gradients.cljs b/frontend/src/app/main/ui/shapes/gradients.cljs
index fe10056a99..cd8ab02e04 100644
--- a/frontend/src/app/main/ui/shapes/gradients.cljs
+++ b/frontend/src/app/main/ui/shapes/gradients.cljs
@@ -20,15 +20,13 @@
 
 (mf/defc linear-gradient [{:keys [id gradient shape]}]
   (let [{:keys [x y width height]} (:selrect shape)
-        transform (case (:type shape)
-                    :path (gmt/matrix)
-                    (gsh/inverse-transform-matrix shape (gpt/point 0.5 0.5)))]
+        transform (when (= :path (:type shape)) (gsh/transform-matrix shape nil (gpt/point 0.5 0.5)))]
     [:linearGradient {:id id
                       :x1 (:start-x gradient)
                       :y1 (:start-y gradient)
                       :x2 (:end-x gradient)
                       :y2 (:end-y gradient)
-                      :gradient-transform transform}
+                      :gradientTransform transform}
      (for [{:keys [offset color opacity]} (:stops gradient)]
        [:stop {:key (str id "-stop-" offset)
                :offset (or offset 0)
@@ -37,9 +35,8 @@
 
 (mf/defc radial-gradient [{:keys [id gradient shape]}]
   (let [{:keys [x y width height]} (:selrect shape)
-        transform (case (:type shape)
-                    :path (gmt/matrix)
-                    (gsh/inverse-transform-matrix shape))]
+        center (gsh/center-shape shape)
+        transform (when (= :path (:type shape)) (gsh/transform-matrix shape))]
     (let [[x y] (if (= (:type shape) :frame) [0 0] [x y])
           translate-vec (gpt/point (+ x (* width (:start-x gradient)))
                                    (+ y (* height (:start-y gradient))))
diff --git a/frontend/src/app/main/ui/workspace/gradients.cljs b/frontend/src/app/main/ui/workspace/gradients.cljs
index 007b8631d8..c88ba43b4e 100644
--- a/frontend/src/app/main/ui/workspace/gradients.cljs
+++ b/frontend/src/app/main/ui/workspace/gradients.cljs
@@ -15,6 +15,7 @@
    [beicon.core :as rx]
    [okulary.core :as l]
    [app.common.math :as mth]
+   [app.common.geom.shapes :as gsh]
    [app.common.geom.point :as gpt]
    [app.common.geom.matrix :as gmt]
    [app.util.dom :as dom]
@@ -238,16 +239,22 @@
         gradient (mf/deref current-gradient-ref)
         editing-spot (mf/deref editing-spot-ref)
 
+        transform (gsh/transform-matrix shape)
+        transform-inverse (gsh/inverse-transform-matrix shape)
+
         {:keys [x y width height] :as sr} (:selrect shape)
 
         [{start-color :color start-opacity :opacity}
          {end-color :color end-opacity :opacity}] (:stops gradient)
 
-        from-p (gpt/point (+ x (* width (:start-x gradient)))
-                          (+ y (* height (:start-y gradient))))
+        from-p (-> (gpt/point (+ x (* width (:start-x gradient)))
+                              (+ y (* height (:start-y gradient))))
 
-        to-p   (gpt/point (+ x (* width (:end-x gradient)))
-                          (+ y (* height (:end-y gradient))))
+                   (gpt/transform transform))
+
+        to-p   (-> (gpt/point (+ x (* width (:end-x gradient)))
+                              (+ y (* height (:end-y gradient))))
+                   (gpt/transform transform))
 
         gradient-vec (gpt/to-vec from-p to-p)
         gradient-length (gpt/length gradient-vec)
@@ -263,14 +270,16 @@
                   (st/emit! (dc/update-gradient changes)))
 
         on-change-start (fn [point]
-                          (let [start-x (/ (- (:x point) x) width)
+                          (let [point (gpt/transform point transform-inverse)
+                                start-x (/ (- (:x point) x) width)
                                 start-y (/ (- (:y point) y) height)
                                 start-x (mth/precision start-x 2)
                                 start-y (mth/precision start-y 2)]
                             (change! {:start-x start-x :start-y start-y})))
 
         on-change-finish (fn [point]
-                           (let [end-x (/ (- (:x point) x) width)
+                           (let [point (gpt/transform point transform-inverse)
+                                 end-x (/ (- (:x point) x) width)
                                  end-y (/ (- (:y point) y) height)
 
                                  end-x (mth/precision end-x 2)