diff --git a/apps/builder/app/builder/features/style-panel/shared/css-value-input/parse-intermediate-or-invalid-value.ts b/apps/builder/app/builder/features/style-panel/shared/css-value-input/parse-intermediate-or-invalid-value.ts
index 97fb16de83e..99c6ee35510 100644
--- a/apps/builder/app/builder/features/style-panel/shared/css-value-input/parse-intermediate-or-invalid-value.ts
+++ b/apps/builder/app/builder/features/style-panel/shared/css-value-input/parse-intermediate-or-invalid-value.ts
@@ -27,8 +27,15 @@ export const parseIntermediateOrInvalidValue = (
     "children" in ast && ast.children?.size === 1
       ? ast.children.first
       : undefined;
+
   if (node?.type === "Number") {
-    const testUnit = "unit" in styleValue ? (styleValue.unit ?? "px") : "px";
+    const unit = "unit" in styleValue ? styleValue.unit : undefined;
+
+    // Use number as a fallback for custom properties
+    const fallbackUnitAsString = property.startsWith("--") ? "" : "px";
+
+    const testUnit = unit === "number" ? "" : (unit ?? fallbackUnitAsString);
+
     const styleInput = parseCssValue(property, `${value}${testUnit}`);
 
     if (styleInput.type !== "invalid") {
diff --git a/apps/builder/app/builder/features/style-panel/shared/css-value-input/parse-intermediate-or-invalid-value.ts.test.ts b/apps/builder/app/builder/features/style-panel/shared/css-value-input/parse-intermediate-or-invalid-value.ts.test.ts
index 74b0e71d805..7dfa4e0816d 100644
--- a/apps/builder/app/builder/features/style-panel/shared/css-value-input/parse-intermediate-or-invalid-value.ts.test.ts
+++ b/apps/builder/app/builder/features/style-panel/shared/css-value-input/parse-intermediate-or-invalid-value.ts.test.ts
@@ -570,6 +570,24 @@ test("parse unit in css variable", () => {
   });
 });
 
+test("prefer unitless css variable", () => {
+  expect(
+    parseIntermediateOrInvalidValue("--size", {
+      type: "intermediate",
+      value: "1",
+      unit: undefined,
+    })
+  ).toEqual({ type: "unit", value: 1, unit: "number" });
+
+  expect(
+    parseIntermediateOrInvalidValue("--size", {
+      type: "intermediate",
+      value: "1",
+      unit: "number",
+    })
+  ).toEqual({ type: "unit", value: 1, unit: "number" });
+});
+
 test("parse color in css variable", () => {
   expect(
     parseIntermediateOrInvalidValue("--size", {