diff --git a/apps/builder/app/builder/features/style-panel/sections/box-shadows/box-shadow-content.tsx b/apps/builder/app/builder/features/style-panel/sections/box-shadows/box-shadow-content.tsx
index 77bdf08dc879..1272cbc9079e 100644
--- a/apps/builder/app/builder/features/style-panel/sections/box-shadows/box-shadow-content.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/box-shadows/box-shadow-content.tsx
@@ -35,7 +35,7 @@ import type { IntermediateStyleValue } from "../../shared/css-value-input";
 import { CssValueInputContainer } from "../../shared/css-value-input";
 import { toPascalCase } from "../../shared/keyword-utils";
 import { ColorControl } from "../../controls";
-import type { SetProperty } from "../../shared/use-style-data";
+import type { DeleteProperty, SetProperty } from "../../shared/use-style-data";
 
 /*
   When it comes to checking and validating individual CSS properties for the box-shadow,
@@ -66,6 +66,7 @@ type BoxShadowContentProps = {
   layer: TupleValue;
   shadow: string;
   onEditLayer: (index: number, layers: LayersValue) => void;
+  deleteProperty: DeleteProperty;
 };
 
 const convertValuesToTupple = (
@@ -90,6 +91,7 @@ export const BoxShadowContent = ({
   index,
   shadow,
   onEditLayer,
+  deleteProperty,
 }: BoxShadowContentProps) => {
   const [intermediateValue, setIntermediateValue] = useState<
     IntermediateStyleValue | InvalidValue | undefined
@@ -432,6 +434,16 @@ export const BoxShadowContent = ({
               handleComplete();
               event.preventDefault();
             }
+
+            if (event.key === "Escape") {
+              if (intermediateValue === undefined) {
+                return;
+              }
+
+              deleteProperty("boxShadow", { isEphemeral: true });
+              setIntermediateValue(undefined);
+              event.preventDefault();
+            }
           }}
         />
       </Flex>
diff --git a/apps/builder/app/builder/features/style-panel/sections/box-shadows/box-shadow-layer.tsx b/apps/builder/app/builder/features/style-panel/sections/box-shadows/box-shadow-layer.tsx
index df8b7d057eda..a06dc79a3e98 100644
--- a/apps/builder/app/builder/features/style-panel/sections/box-shadows/box-shadow-layer.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/box-shadows/box-shadow-layer.tsx
@@ -64,6 +64,7 @@ export const BoxShadowLayer = <T extends TupleValue>(props: LayerProps<T>) => {
           shadow={shadow}
           layer={layer}
           onEditLayer={props.onEditLayer}
+          deleteProperty={props.deleteProperty}
         />
       }
     >
diff --git a/apps/builder/app/builder/features/style-panel/sections/transitions/transition-content.tsx b/apps/builder/app/builder/features/style-panel/sections/transitions/transition-content.tsx
index 48e05fd7f8ad..b75f6a43b47c 100644
--- a/apps/builder/app/builder/features/style-panel/sections/transitions/transition-content.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/transitions/transition-content.tsx
@@ -80,7 +80,6 @@ export const TransitionContent = ({
     }
 
     onEditLayer(index, layers);
-    setIntermediateValue(undefined);
   };
 
   const handlePropertyUpdate = (
diff --git a/apps/builder/app/builder/features/style-panel/style-layer-utils.ts b/apps/builder/app/builder/features/style-panel/style-layer-utils.ts
index 611b4a73997e..3320360cdec7 100644
--- a/apps/builder/app/builder/features/style-panel/style-layer-utils.ts
+++ b/apps/builder/app/builder/features/style-panel/style-layer-utils.ts
@@ -8,12 +8,6 @@ import type { SectionProps } from "./sections";
 import type { StyleInfo } from "./shared/style-info";
 import type { CreateBatchUpdate } from "./shared/use-style-data";
 
-const isLayersOrTuppleValue = (
-  value: TupleValue | LayersValue
-): value is LayersValue | TupleValue => {
-  return value.type === "layers" || value.type === "tuple";
-};
-
 export const deleteLayer = <T extends TupleValue | LayersValue>(
   property: StyleProperty,
   index: number,
@@ -35,10 +29,6 @@ export const deleteLayer = <T extends TupleValue | LayersValue>(
           value: newLayers as LayersValue["value"],
         };
 
-  if (isLayersOrTuppleValue(propertyValue) === false) {
-    return;
-  }
-
   if (newLayers.length === 0) {
     batch.deleteProperty(property);
   } else {
@@ -86,12 +76,24 @@ export const addLayer = <T extends LayersValue | TupleValue>(
     return;
   }
 
-  const existingValues = getValue(property, style);
-  if (existingValues?.type === "layers" || existingValues?.type === "tuple") {
-    // Adding layers we had before
+  const existingValues = style[property]?.value;
+  // Transitions come's with a default property of tuple. Which needs to be overwritten
+  // Because, we handle transitions using layers in the project. So, we merge the values
+  // only if the existing value is a layer or the value is overwritten a layer is created.
+  if (
+    (property === "transition" || property === "boxShadow") &&
+    existingValues?.type === "layers"
+  ) {
     value.value = [...value.value, ...existingValues.value] as T["value"];
   }
 
+  if (property === "filter" && existingValues?.type === "tuple") {
+    value.value = [
+      ...value.value,
+      ...(existingValues?.value || []),
+    ] as T["value"];
+  }
+
   const batch = createBatchUpdate();
   batch.setProperty(property)(value);
   batch.publish();
@@ -132,8 +134,8 @@ export const getLayerCount = (property: StyleProperty, style: StyleInfo) => {
 
 export const getValue = (property: StyleProperty, style: StyleInfo) => {
   const value = style[property]?.value;
-  return value?.type === "layers" ||
-    (value?.type === "tuple" && value.value.length > 0)
+  return (value?.type === "layers" || value?.type === "tuple") &&
+    value.value.length > 0
     ? value
     : undefined;
 };