diff --git a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/html_renderer/component/image.rs b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/html_renderer/component/image.rs
index 5af248dfa..f01050f4f 100644
--- a/apps/ai-game-creator-shell/src-tauri/src/ui_editor/html_renderer/component/image.rs
+++ b/apps/ai-game-creator-shell/src-tauri/src/ui_editor/html_renderer/component/image.rs
@@ -108,19 +108,60 @@ fn fill_clip_path(method: &FillMethod, amount: f32) -> Option<String> {
             90.0,
         )),
         FillMethod::Radial180 { origin, clockwise } => Some(conic_mask(
-            radial_origin_angle_180(*origin),
+            radial_origin_angle_180(*origin) - if *clockwise { 90.0 } else { 0.0 },
             *clockwise,
             amount,
             180.0,
         )),
         FillMethod::Radial360 { origin, clockwise } => Some(conic_mask(
-            radial_origin_angle_360(*origin),
+            radial_origin_angle_360(*origin) - if *clockwise { 90.0 } else { 0.0 },
             *clockwise,
             amount,
             360.0,
         )),
     }
 }
+
+#[cfg(test)]
+mod tests {
+    use super::{fill_clip_path, FillMethod, Radial180Origin, Radial360Origin};
+
+    #[test]
+    fn clockwise_radial_180_and_360_start_ninety_degrees_before_origin() {
+        let radial_180 = fill_clip_path(
+            &FillMethod::Radial180 {
+                origin: Radial180Origin::Top,
+                clockwise: true,
+            },
+            0.5,
+        )
+        .unwrap();
+        let radial_360 = fill_clip_path(
+            &FillMethod::Radial360 {
+                origin: Radial360Origin::Right,
+                clockwise: true,
+            },
+            0.25,
+        )
+        .unwrap();
+        assert!(radial_180.contains("from -90deg"));
+        assert!(radial_360.contains("from 0deg"));
+    }
+
+    #[test]
+    fn counter_clockwise_radial_start_angles_remain_unchanged() {
+        let radial_180 = fill_clip_path(
+            &FillMethod::Radial180 {
+                origin: Radial180Origin::Top,
+                clockwise: false,
+            },
+            0.5,
+        )
+        .unwrap();
+        assert!(radial_180.contains("from -90deg"));
+    }
+}
+
 fn conic_mask(origin: f32, clockwise: bool, amount: f32, max_sweep: f32) -> String {
     let sweep = amount * max_sweep;
     let start = if clockwise { origin } else { origin - sweep };