diff --git a/apps/builder/app/builder/features/style-panel/controls/color/color-control.tsx b/apps/builder/app/builder/features/style-panel/controls/color/color-control.tsx
index e9d05db8277b..39636db98301 100644
--- a/apps/builder/app/builder/features/style-panel/controls/color/color-control.tsx
+++ b/apps/builder/app/builder/features/style-panel/controls/color/color-control.tsx
@@ -27,6 +27,9 @@ export const ColorControl = ({ property }: { property: StyleProperty }) => {
       onChange={(styleValue) => setValue(styleValue, { isEphemeral: true })}
       onChangeComplete={setValue}
       onAbort={() => deleteProperty(property, { isEphemeral: true })}
+      onReset={() => {
+        deleteProperty(property);
+      }}
     />
   );
 };
diff --git a/apps/builder/app/builder/features/style-panel/controls/text/text-control.tsx b/apps/builder/app/builder/features/style-panel/controls/text/text-control.tsx
index 65eb776ebaef..8a0cf8e8903a 100644
--- a/apps/builder/app/builder/features/style-panel/controls/text/text-control.tsx
+++ b/apps/builder/app/builder/features/style-panel/controls/text/text-control.tsx
@@ -55,6 +55,10 @@ export const TextControl = ({ property }: { property: StyleProperty }) => {
       onAbort={() => {
         deleteProperty(property, { isEphemeral: true });
       }}
+      onReset={() => {
+        setIntermediateValue(undefined);
+        deleteProperty(property);
+      }}
     />
   );
 };
diff --git a/apps/builder/app/builder/features/style-panel/sections/borders/border-color.tsx b/apps/builder/app/builder/features/style-panel/sections/borders/border-color.tsx
index 921b585869d4..dc1076698391 100644
--- a/apps/builder/app/builder/features/style-panel/sections/borders/border-color.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/borders/border-color.tsx
@@ -84,6 +84,13 @@ export const BorderColor = () => {
                 }
                 batch.publish({ isEphemeral: true });
               }}
+              onReset={() => {
+                const batch = createBatchUpdate();
+                for (const property of properties) {
+                  batch.deleteProperty(property);
+                }
+                batch.publish();
+              }}
             />
           </div>
         </PropertyValueTooltip>
diff --git a/apps/builder/app/builder/features/style-panel/sections/layout/layout.tsx b/apps/builder/app/builder/features/style-panel/sections/layout/layout.tsx
index fa770da64547..b7c7317efeee 100644
--- a/apps/builder/app/builder/features/style-panel/sections/layout/layout.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/layout/layout.tsx
@@ -183,6 +183,10 @@ const GapInput = ({
         onAbort={() => {
           onPreviewChange();
         }}
+        onReset={() => {
+          onIntermediateChange(undefined);
+          onReset();
+        }}
       />
     </Box>
   );
diff --git a/apps/builder/app/builder/features/style-panel/sections/shared/input-popover.tsx b/apps/builder/app/builder/features/style-panel/sections/shared/input-popover.tsx
index 5d7ef000476e..cc049b67b9fe 100644
--- a/apps/builder/app/builder/features/style-panel/sections/shared/input-popover.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/shared/input-popover.tsx
@@ -77,8 +77,8 @@ const Input = ({
         batch.publish({ isEphemeral: true });
       }}
       onChangeComplete={({ value }) => {
-        const batch = createBatchUpdate();
         setIntermediateValue(undefined);
+        const batch = createBatchUpdate();
         for (const property of activeProperties) {
           batch.setProperty(property)(value);
         }
@@ -90,6 +90,15 @@ const Input = ({
         batch.deleteProperty(property);
         batch.publish({ isEphemeral: true });
       }}
+      onReset={() => {
+        setIntermediateValue(undefined);
+        const batch = createBatchUpdate();
+        for (const property of activeProperties) {
+          batch.deleteProperty(property);
+        }
+        batch.publish();
+        onClosePopover();
+      }}
     />
   );
 };
diff --git a/apps/builder/app/builder/features/style-panel/sections/transforms/transform-scale.tsx b/apps/builder/app/builder/features/style-panel/sections/transforms/transform-scale.tsx
index cbd256dda217..62c1db003990 100644
--- a/apps/builder/app/builder/features/style-panel/sections/transforms/transform-scale.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/transforms/transform-scale.tsx
@@ -127,6 +127,9 @@ export const ScalePanelContent = () => {
               }
             }}
             onAbort={() => deleteProperty(property, { isEphemeral: true })}
+            onReset={() => {
+              deleteProperty(property);
+            }}
           />
         </Grid>
         <Grid
@@ -168,6 +171,9 @@ export const ScalePanelContent = () => {
               }
             }}
             onAbort={() => deleteProperty(property, { isEphemeral: true })}
+            onReset={() => {
+              deleteProperty(property);
+            }}
           />
         </Grid>
         <Grid
@@ -205,6 +211,9 @@ export const ScalePanelContent = () => {
               }
             }}
             onAbort={() => deleteProperty(property, { isEphemeral: true })}
+            onReset={() => {
+              deleteProperty(property);
+            }}
           />
         </Grid>
       </Flex>
diff --git a/apps/builder/app/builder/features/style-panel/shared/color-picker.tsx b/apps/builder/app/builder/features/style-panel/shared/color-picker.tsx
index 8503fb6564b4..b01a81d6441c 100644
--- a/apps/builder/app/builder/features/style-panel/shared/color-picker.tsx
+++ b/apps/builder/app/builder/features/style-panel/shared/color-picker.tsx
@@ -169,6 +169,7 @@ const ColorPickerPopoverContent = ({
 type ColorPickerProps = {
   onChange: (value: StyleValue) => void;
   onChangeComplete: (value: StyleValue) => void;
+  onReset: () => void;
   onAbort: () => void;
   value: StyleValue;
   currentColor: StyleValue;
@@ -243,6 +244,7 @@ export const ColorPicker = ({
   onChange,
   onChangeComplete,
   onAbort,
+  onReset,
 }: ColorPickerProps) => {
   const [intermediateValue, setIntermediateValue] = useState<
     StyleValue | IntermediateStyleValue
@@ -326,6 +328,10 @@ export const ColorPicker = ({
         onChange(invalidValue);
       }}
       onAbort={onAbort}
+      onReset={() => {
+        setIntermediateValue(undefined);
+        onReset();
+      }}
     />
   );
 };
diff --git a/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input-container.tsx b/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input-container.tsx
index b23ce060a597..d03723b67c36 100644
--- a/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input-container.tsx
+++ b/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input-container.tsx
@@ -11,6 +11,7 @@ type CssValueInputContainerProps = {
   | "onChange"
   | "onHighlight"
   | "onChangeComplete"
+  | "onReset"
   | "onAbort"
   | "intermediateValue"
 >;
@@ -56,6 +57,9 @@ export const CssValueInputContainer = ({
       onAbort={() => {
         deleteProperty(property, { isEphemeral: true });
       }}
+      onReset={() => {
+        deleteProperty(property);
+      }}
     />
   );
 };
diff --git a/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.stories.tsx b/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.stories.tsx
index 161e96667e91..3874486eb2ab 100644
--- a/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.stories.tsx
+++ b/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.stories.tsx
@@ -47,6 +47,9 @@ export const WithKeywords = () => {
       onAbort={() => {
         action("onAbort")();
       }}
+      onReset={() => {
+        action("onReset")();
+      }}
     />
   );
 };
@@ -91,6 +94,9 @@ export const WithIcons = () => {
       onAbort={() => {
         action("onAbort")();
       }}
+      onReset={() => {
+        action("onReset")();
+      }}
     />
   );
 };
@@ -134,6 +140,9 @@ export const WithUnits = () => {
         onAbort={() => {
           action("onAbort")();
         }}
+        onReset={() => {
+          action("onReset")();
+        }}
       />
       <InputField
         readOnly
diff --git a/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.tsx b/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.tsx
index 327d44a9efa9..4657739a453f 100644
--- a/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.tsx
+++ b/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.tsx
@@ -267,6 +267,7 @@ type CssValueInputProps = Pick<
   onChangeComplete: (event: ChangeCompleteEvent) => void;
   onHighlight: (value: StyleValue | undefined) => void;
   onAbort: () => void;
+  onReset: () => void;
   icon?: ReactNode;
   showSuffix?: boolean;
 };
@@ -337,6 +338,7 @@ export const CssValueInput = ({
   getOptions = () => [],
   onHighlight,
   onAbort,
+  onReset,
   disabled,
   ["aria-disabled"]: ariaDisabled,
   fieldSizing,
@@ -376,6 +378,13 @@ export const CssValueInput = ({
     const { value } = event;
     const defaultProps = { altKey: false, shiftKey: false };
 
+    // We are resetting by setting the value to an empty string
+    if (value.type === "intermediate" && value.value === "") {
+      closeMenu();
+      onReset();
+      return;
+    }
+
     if (value.type !== "intermediate" && value.type !== "invalid") {
       // The value might be valid but not selected from the combo menu. Close the menu.
       closeMenu();
diff --git a/apps/builder/app/builder/features/style-panel/shared/shadow-content.tsx b/apps/builder/app/builder/features/style-panel/shared/shadow-content.tsx
index d6c80c20e0b1..e732cb7d13f9 100644
--- a/apps/builder/app/builder/features/style-panel/shared/shadow-content.tsx
+++ b/apps/builder/app/builder/features/style-panel/shared/shadow-content.tsx
@@ -336,6 +336,9 @@ export const ShadowContent = ({
               handlePropertyChange({ color: styleValue })
             }
             onAbort={() => handlePropertyChange({ color: colorControlProp })}
+            onReset={() => {
+              handlePropertyChange({ color: undefined });
+            }}
           />
         </Flex>