diff --git a/inc/css/blocks/class-shared-css.php b/inc/css/blocks/class-shared-css.php
index c368a9983..aa4dbc417 100644
--- a/inc/css/blocks/class-shared-css.php
+++ b/inc/css/blocks/class-shared-css.php
@@ -275,6 +275,14 @@ public static function section_shared() {
 						'value'   => 'boxShadowColor',
 						'default' => '#000',
 						'format'  => function( $value, $attrs ) {
+							if ( ! isset( $attrs['boxShadowColorOpacity'] ) ) {
+								return $value;
+							}
+
+							if ( 100 === $attrs['boxShadowColorOpacity'] ) {
+								return $value;
+							}
+
 							$opacity = ( isset( $attrs['boxShadowColorOpacity'] ) ? $attrs['boxShadowColorOpacity'] : 50 ) / 100;
 							return Base_CSS::hex2rgba( $value, $opacity );
 						},
diff --git a/src/blocks/blocks/flip/inspector.js b/src/blocks/blocks/flip/inspector.js
index 91ea01701..0d634c291 100644
--- a/src/blocks/blocks/flip/inspector.js
+++ b/src/blocks/blocks/flip/inspector.js
@@ -112,7 +112,7 @@ const Inspector = ({
 
 	const changeBoxShadowColor = value => {
 		setAttributes({
-			boxShadowColor: ( 100 > attributes.boxShadowColorOpacity && attributes.boxShadowColor?.includes( 'var(' ) ) ?
+			boxShadowColor: ( 100 > attributes.boxShadowColorOpacity && value?.includes( 'var(' ) ) ?
 				getComputedStyle( document.documentElement, null ).getPropertyValue( value?.replace( 'var(', '' )?.replace( ')', '' ) ) :
 				value
 		});
diff --git a/src/blocks/blocks/section/column/edit.js b/src/blocks/blocks/section/column/edit.js
index 44e7c32d7..bd207c408 100644
--- a/src/blocks/blocks/section/column/edit.js
+++ b/src/blocks/blocks/section/column/edit.js
@@ -254,7 +254,7 @@ const Edit = ({
 
 	if ( true === attributes.boxShadow ) {
 		boxShadowStyle = {
-			boxShadow: `${ attributes.boxShadowHorizontal }px ${ attributes.boxShadowVertical }px ${ attributes.boxShadowBlur }px ${ attributes.boxShadowSpread }px ${  hexToRgba( ( attributes.boxShadowColor ? attributes.boxShadowColor : '#000000' ), attributes.boxShadowColorOpacity ) }`
+			boxShadow: `${ attributes.boxShadowHorizontal }px ${ attributes.boxShadowVertical }px ${ attributes.boxShadowBlur }px ${ attributes.boxShadowSpread }px ${ attributes.boxShadowColor.includes( 'var(' ) && ( attributes.boxShadowColorOpacity === undefined || 100 === attributes.boxShadowColorOpacity ) ? attributes.boxShadowColor : hexToRgba( ( attributes.boxShadowColor ? attributes.boxShadowColor : '#000000' ), attributes.boxShadowColorOpacity ) }`
 		};
 	}
 
diff --git a/src/blocks/blocks/section/column/inspector.js b/src/blocks/blocks/section/column/inspector.js
index acc6c00b4..1bf6c63c9 100644
--- a/src/blocks/blocks/section/column/inspector.js
+++ b/src/blocks/blocks/section/column/inspector.js
@@ -472,13 +472,29 @@ const Inspector = ({
 								<ColorGradientControl
 									label={ __( 'Shadow Color', 'otter-blocks' ) }
 									colorValue={ attributes.boxShadowColor }
-									onColorChange={ value => setAttributes({ boxShadowColor: value }) }
+									onColorChange={ value => setAttributes({
+										boxShadowColor: ( 100 > attributes.boxShadowColorOpacity && value?.includes( 'var(' ) ) ?
+											getComputedStyle( document.documentElement, null ).getPropertyValue( value?.replace( 'var(', '' )?.replace( ')', '' ) ) :
+											value
+									}) }
 								/>
 
 								<RangeControl
 									label={ __( 'Opacity', 'otter-blocks' ) }
 									value={ attributes.boxShadowColorOpacity }
-									onChange={ value => setAttributes({ boxShadowColorOpacity: value }) }
+									onChange={ value => {
+										const changes = { boxShadowColorOpacity: value };
+
+										/**
+										 * If the value is less than 100 and the color is CSS a variable, then replace the CSS variable with the computed value.
+										 * This is needed because the way calculate the opacity of the color is by using the HEX value since we are doing in the server side.
+										 */
+										if ( 100 > value && attributes.boxShadowColor?.includes( 'var(' ) ) {
+											changes.boxShadowColor = getComputedStyle( document.documentElement, null ).getPropertyValue( attributes.boxShadowColor.replace( 'var(', '' ).replace( ')', '' ) );
+										}
+
+										setAttributes( changes );
+									} }
 									min={ 0 }
 									max={ 100 }
 								/>
diff --git a/src/blocks/blocks/section/columns/edit.js b/src/blocks/blocks/section/columns/edit.js
index 995dd8567..813cfa52a 100644
--- a/src/blocks/blocks/section/columns/edit.js
+++ b/src/blocks/blocks/section/columns/edit.js
@@ -308,7 +308,7 @@ const Edit = ({
 
 	if ( true === attributes.boxShadow ) {
 		boxShadowStyle = {
-			boxShadow: `${ attributes.boxShadowHorizontal }px ${ attributes.boxShadowVertical }px ${ attributes.boxShadowBlur }px ${ attributes.boxShadowSpread }px ${  hexToRgba( ( attributes.boxShadowColor ? attributes.boxShadowColor : '#000000' ), attributes.boxShadowColorOpacity ) }`
+			boxShadow: `${ attributes.boxShadowHorizontal }px ${ attributes.boxShadowVertical }px ${ attributes.boxShadowBlur }px ${ attributes.boxShadowSpread }px ${ attributes.boxShadowColor.includes( 'var(' ) && ( attributes.boxShadowColorOpacity === undefined || 100 === attributes.boxShadowColorOpacity ) ? attributes.boxShadowColor : hexToRgba( ( attributes.boxShadowColor ? attributes.boxShadowColor : '#000000' ), attributes.boxShadowColorOpacity ) }`
 		};
 	}
 
diff --git a/src/blocks/blocks/section/columns/inspector.js b/src/blocks/blocks/section/columns/inspector.js
index 0da7a788c..770e61ced 100644
--- a/src/blocks/blocks/section/columns/inspector.js
+++ b/src/blocks/blocks/section/columns/inspector.js
@@ -917,13 +917,30 @@ const Inspector = ({
 									<ColorGradientControl
 										label={ __( 'Shadow Color', 'otter-blocks' ) }
 										colorValue={ attributes.boxShadowColor }
-										onColorChange={ value => setAttributes({ boxShadowColor: value }) }
+										onColorChange={ value => setAttributes({
+											boxShadowColor: ( 100 > attributes.boxShadowColorOpacity && value?.includes( 'var(' ) ) ?
+												getComputedStyle( document.documentElement, null ).getPropertyValue( value?.replace( 'var(', '' )?.replace( ')', '' ) ) :
+												value
+										}) }
 									/>
 
 									<RangeControl
 										label={ __( 'Opacity', 'otter-blocks' ) }
 										value={ attributes.boxShadowColorOpacity }
-										onChange={ value => setAttributes({ boxShadowColorOpacity: value }) }
+										onChange={ value => {
+
+											const changes = { boxShadowColorOpacity: value };
+
+											/**
+											 * If the value is less than 100 and the color is CSS a variable, then replace the CSS variable with the computed value.
+											 * This is needed because the way calculate the opacity of the color is by using the HEX value since we are doing in the server side.
+											 */
+											if ( 100 > value && attributes.boxShadowColor?.includes( 'var(' ) ) {
+												changes.boxShadowColor = getComputedStyle( document.documentElement, null ).getPropertyValue( attributes.boxShadowColor.replace( 'var(', '' ).replace( ')', '' ) );
+											}
+
+											setAttributes( changes );
+										} }
 										min={ 0 }
 										max={ 100 }
 									/>