diff --git a/src/utils/gradient.ts b/src/utils/gradient.ts
index 857f9a09..5c2b5c60 100644
--- a/src/utils/gradient.ts
+++ b/src/utils/gradient.ts
@@ -39,6 +39,18 @@ export function getSelectedGradient(
         return { currentGradient: defaultValue, selectedOption: { value: defaultValue, display_name: defaultValue, path: "" } as GradientOption };
     }
 
+    // Determine current packing mode and filter options accorrdingly
+    const modePath = gradientOptions[0].packing_mode_path ?? "";
+    const rawMode = modePath ? getCurrentValue(modePath) : undefined;
+    const currentMode = typeof rawMode === "string" ? rawMode : "gradient";
+    const validOptions =
+        gradientOptions.filter(o => o.packing_mode === currentMode);
+
+    if (!validOptions.length) {
+        // Fallback to default if no valid options
+        return { currentGradient: defaultValue, selectedOption: { value: defaultValue, display_name: defaultValue, path: "" } as GradientOption };
+    }
+
     // Shared selector path (all options for this control share it)
     const selectorPath = gradientOptions[0].path ?? "";
 
@@ -48,9 +60,9 @@ export function getSelectedGradient(
 
     // The full option object for that value, or first as fallback
     const selectedOption =
-        gradientOptions.find(o => o.value === currentGradient) ?? gradientOptions[0];
+        validOptions.find(o => o.value === currentGradient) ?? validOptions[0];
 
-    return { currentGradient, selectedOption };
+    return { currentGradient: selectedOption.value, selectedOption };
 }