ankle gredient

src/pages/editor/utils/gradient.ts

@@ -25,23 +25,24 @@ const getGradientPoints = (
 ): { start: Point; end: Point } => {
   const safeWidth = Math.max(1, width);
   const safeHeight = Math.max(1, height);
+  // App/UI angle: 0° = top→bottom, 90° = left→right (clockwise).
   const rad = toRadians(normalizeAngle(angle));
-  const dx = Math.cos(rad);
-  const dy = Math.sin(rad);
   const half = Math.sqrt(safeWidth * safeWidth + safeHeight * safeHeight) / 2;
+  const halfX = Math.sin(rad) * half;
+  const halfY = Math.cos(rad) * half;
 
   if (mode === "centered") {
     return {
-      start: { x: -dx * half, y: -dy * half },
-      end: { x: dx * half, y: dy * half },
+      start: { x: -halfX, y: -halfY },
+      end: { x: halfX, y: halfY },
     };
   }
 
   const cx = safeWidth / 2;
   const cy = safeHeight / 2;
   return {
-    start: { x: cx - dx * half, y: cy - dy * half },
-    end: { x: cx + dx * half, y: cy + dy * half },
+    start: { x: cx - halfX, y: cy - halfY },
+    end: { x: cx + halfX, y: cy + halfY },
   };
 };
 
@@ -91,7 +92,11 @@ export const getSvgGradientEndpoints = (
   };
 };
 
+/** Convert app/UI angle to CSS linear-gradient degrees (0deg = upward in CSS). */
+export const toCssGradientAngle = (angle: number) =>
+  normalizeAngle(180 - normalizeAngle(angle));
+
 export const toCssLinearGradient = (gradient: LinearGradient | undefined) => {
   if (!gradient) return undefined;
-  return `linear-gradient(${normalizeAngle(gradient.angle)}deg, ${gradient.from} 0%, ${gradient.to} 100%)`;
+  return `linear-gradient(${toCssGradientAngle(gradient.angle)}deg, ${gradient.from} 0%, ${gradient.to} 100%)`;
 };