diff --git a/includes/blocks/class-kadence-blocks-advanced-heading-block.php b/includes/blocks/class-kadence-blocks-advanced-heading-block.php
index cbe7dce7b..3bbd1c51e 100644
--- a/includes/blocks/class-kadence-blocks-advanced-heading-block.php
+++ b/includes/blocks/class-kadence-blocks-advanced-heading-block.php
@@ -180,9 +180,21 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
 				$css->add_property( 'background-color', $css->render_color( $attributes['background'] ) );
 			}
 		}
-		if ( isset( $attributes['textShadow'] ) && is_array( $attributes['textShadow'] ) && isset( $attributes['textShadow'][0] ) && is_array( $attributes['textShadow'][0] ) && isset( $attributes['textShadow'][0]['enable'] ) && $attributes['textShadow'][0]['enable'] ) {
-			$css->add_property( 'text-shadow', ( isset( $attributes['textShadow'][0]['hOffset'] ) ? $attributes['textShadow'][0]['hOffset'] : 1 ) . 'px ' . ( isset( $attributes['textShadow'][0]['vOffset'] ) ? $attributes['textShadow'][0]['vOffset'] : 1 ) . 'px ' . ( isset( $attributes['textShadow'][0]['blur'] ) ? $attributes['textShadow'][0]['blur'] : 1 ) . 'px ' . ( isset( $attributes['textShadow'][0]['color'] ) ? $css->render_color( $attributes['textShadow'][0]['color'] ) : 'rgba(0,0,0,0.2)' ) );
+		if ( (isset($attributes['enableTextShadow']) && !empty($attributes['enableTextShadow']) || (isset($attributes['textShadow']) && !empty($attributes['textShadow'][0]['enable'])) ) ) {
+			if ( isset( $attributes['textShadow'] ) && is_array( $attributes['textShadow'] ) && isset( $attributes['textShadow'][0] ) && is_array( $attributes['textShadow'][0] ) && ((isset( $attributes['enableTextShadow'] ) && $attributes['enableTextShadow']) || (isset( $attributes['textShadow'][0]['enable'] ) && $attributes['textShadow'][0]['enable']) ) ) {
+				$css->add_property( 'text-shadow', ( isset( $attributes['textShadow'][0]['hOffset'] ) ? $attributes['textShadow'][0]['hOffset'] : 1 ) . 'px ' . ( isset( $attributes['textShadow'][0]['vOffset'] ) ? $attributes['textShadow'][0]['vOffset'] : 1 ) . 'px ' . ( isset( $attributes['textShadow'][0]['blur'] ) ? $attributes['textShadow'][0]['blur'] : 1 ) . 'px ' . ( isset( $attributes['textShadow'][0]['color'] ) ? $css->render_color( $attributes['textShadow'][0]['color'] ) : 'rgba(0,0,0,0.2)' ) );
+			}
+			if ( isset( $attributes['textShadowTablet'] ) && is_array( $attributes['textShadowTablet'] ) && isset( $attributes['textShadowTablet'][0] ) && is_array( $attributes['textShadowTablet'][0] ) && ((isset( $attributes['enableTextShadow'] ) && $attributes['enableTextShadow']) || (isset( $attributes['textShadow'][0]['enable'] ) && $attributes['textShadow'][0]['enable']) ) ) {
+				$css->set_media_state('tablet');
+				$css->add_property( 'text-shadow', ( isset( $attributes['textShadowTablet'][0]['hOffset'] ) && ! empty( $attributes['textShadowTablet'][0]['hOffset'] ) ? $attributes['textShadowTablet'][0]['hOffset'] : $attributes['textShadow'][0]['hOffset'] ) . 'px ' . ( isset( $attributes['textShadowTablet'][0]['vOffset'] ) && ! empty( $attributes['textShadowTablet'][0]['vOffset'] ) ? $attributes['textShadowTablet'][0]['vOffset'] : $attributes['textShadow'][0]['vOffset'] ) . 'px ' . ( isset( $attributes['textShadowTablet'][0]['blur'] ) && ! empty( $attributes['textShadowTablet'][0]['blur'] ) ? $attributes['textShadowTablet'][0]['blur']  : $attributes['textShadow'][0]['blur'] ) . 'px ' . ( isset( $attributes['textShadowTablet'][0]['color'] ) ? $css->render_color( $attributes['textShadowTablet'][0]['color'] ) : $css->render_color( $attributes['textShadow'][0]['color'] ) ) );
+			}
+			if ( isset( $attributes['textShadowMobile'] ) && is_array( $attributes['textShadowMobile'] ) && isset( $attributes['textShadowMobile'][0] ) && is_array( $attributes['textShadowMobile'][0] ) && ((isset( $attributes['enableTextShadow'] ) && $attributes['enableTextShadow']) || (isset( $attributes['textShadow'][0]['enable'] ) && $attributes['textShadow'][0]['enable']) ) ) {
+				$css->set_media_state('mobile');
+				$css->add_property( 'text-shadow', ( isset( $attributes['textShadowMobile'][0]['hOffset'] ) && ! empty( $attributes['textShadowMobile'][0]['hOffset'] ) ? $attributes['textShadowMobile'][0]['hOffset'] : ( isset( $attributes['textShadowTablet'][0]['hOffset'] ) && ! empty( $attributes['textShadowTablet'][0]['hOffset'] ) ? $attributes['textShadowTablet'][0]['hOffset'] : $attributes['textShadow'][0]['hOffset']) ) . 'px ' . (  isset( $attributes['textShadowMobile'][0]['vOffset'] ) && ! empty( $attributes['textShadowMobile'][0]['vOffset'] ) ? $attributes['textShadowMobile'][0]['vOffset'] : (isset( $attributes['textShadowTablet'][0]['vOffset'] ) && ! empty( $attributes['textShadowTablet'][0]['vOffset'] ) ? $attributes['textShadowTablet'][0]['vOffset'] : $attributes['textShadow'][0]['vOffset']) ) . 'px ' . ( isset( $attributes['textShadowMobile'][0]['blur'] ) && ! empty( $attributes['textShadowMobile'][0]['blur'] ) ? $attributes['textShadowMobile'][0]['blur'] : (isset( $attributes['textShadowTablet'][0]['blur'] ) && ! empty( $attributes['textShadowTablet'][0]['blur'] ) ? $attributes['textShadowTablet'][0]['blur']  : $attributes['textShadow'][0]['blur']) ) . 'px ' . (isset($attributes['textShadowMobile'][0]['color']) ? $css->render_color($attributes['textShadowMobile'][0]['color']) : (isset($attributes['textShadowTablet'][0]['color']) ? $css->render_color($attributes['textShadowTablet'][0]['color']) : $css->render_color($attributes['textShadow'][0]['color']))) );
+			}
 		}
+
+
 		$css->set_media_state( 'tablet' );
 		// Old size first.
 		if ( ! empty( $attributes['tabSize'] ) ) {
diff --git a/src/blocks/advancedheading/block.json b/src/blocks/advancedheading/block.json
index 18d97c3f3..5b0e6f5f6 100644
--- a/src/blocks/advancedheading/block.json
+++ b/src/blocks/advancedheading/block.json
@@ -323,6 +323,10 @@
 		"mobileAlign": {
 			"type": "string"
 		},
+		"enableTextShadow": {
+			"type": "boolean",
+			"default": false
+		},
 		"textShadow": {
 			"type": "array",
 			"default": [
@@ -335,6 +339,30 @@
 				}
 			]
 		},
+		"textShadowTablet": {
+			"type": "array",
+			"default": [
+				{
+					"enable": false,
+					"color": "",
+					"blur": "",
+					"hOffset": "",
+					"vOffset": ""
+				}
+			]
+		},
+		"textShadowMobile": {
+			"type": "array",
+			"default": [
+				{
+					"enable": false,
+					"color": "",
+					"blur": "",
+					"hOffset": "",
+					"vOffset": ""
+				}
+			]
+		},
 		"htmlTag": {
 			"type": "string",
 			"default": "heading"
diff --git a/src/blocks/advancedheading/edit.js b/src/blocks/advancedheading/edit.js
index aee2007fc..021e6da0f 100644
--- a/src/blocks/advancedheading/edit.js
+++ b/src/blocks/advancedheading/edit.js
@@ -10,6 +10,7 @@ import classnames from 'classnames';
 import {
 	PopColorControl,
 	TextShadowControl,
+	ResponsiveShadowControl,
 	TypographyControls,
 	InlineTypographyControls,
 	ResponsiveMeasurementControls,
@@ -119,7 +120,10 @@ function KadenceAdvancedHeading(props) {
 		content,
 		color,
 		colorClass,
+		enableTextShadow,
 		textShadow,
+		textShadowTablet,
+		textShadowMobile,
 		mobileAlign,
 		tabletAlign,
 		size,
@@ -364,19 +368,73 @@ function KadenceAdvancedHeading(props) {
 			setAttributes({ tabletMarkBorderStyles: tempBorderStyle });
 			setAttributes({ mobileMarkBorderStyles: tempBorderStyle });
 		}
+
+		// update enableTextShadow if textShadow[0].enable is true for previous unresponsive setting
+		if (!enableTextShadow && textShadow[0].enable) {
+			setAttributes({ enableTextShadow: true });
+		}
 	}, []);
 
+	let newItems;
 	const saveShadow = (value) => {
-		const newItems = textShadow.map((item, thisIndex) => {
-			if (0 === thisIndex) {
-				item = { ...item, ...value };
+		if (value.enable === 'reset') {
+			const resetItems = [
+				{
+					type: 'array',
+					default: [
+						{
+							enable: false,
+							color: 'rgba(0, 0, 0, 0.2)',
+							blur: 1,
+							hOffset: 1,
+							vOffset: 1,
+						},
+					],
+					enable: false,
+				},
+			];
+			switch (previewDevice) {
+				case 'Desktop':
+					setAttributes({ textShadow: resetItems });
+					break;
+				case 'Tablet':
+					setAttributes({ textShadowTablet: resetItems });
+					break;
+				case 'Mobile':
+					setAttributes({ textShadowMobile: resetItems });
+					break;
 			}
-
-			return item;
-		});
-		setAttributes({
-			textShadow: newItems,
-		});
+		} else if (previewDevice === 'Desktop') {
+			newItems = textShadow.map((item, thisIndex) => {
+				if (0 === thisIndex) {
+					item = { ...item, ...value };
+				}
+				return item;
+			});
+			setAttributes({
+				textShadow: newItems,
+			});
+		} else if (previewDevice === 'Tablet') {
+			newItems = textShadowTablet.map((item, thisIndex) => {
+				if (0 === thisIndex) {
+					item = { ...item, ...value };
+				}
+				return item;
+			});
+			setAttributes({
+				textShadowTablet: newItems,
+			});
+		} else if (previewDevice === 'Mobile') {
+			newItems = textShadowMobile.map((item, thisIndex) => {
+				if (0 === thisIndex) {
+					item = { ...item, ...value };
+				}
+				return item;
+			});
+			setAttributes({
+				textShadowMobile: newItems,
+			});
+		}
 	};
 
 	const isDynamicReplaced =
@@ -489,6 +547,60 @@ function KadenceAdvancedHeading(props) {
 		undefined !== tabletAlign ? tabletAlign : '',
 		undefined !== mobileAlign ? mobileAlign : ''
 	);
+	const previewColorTextShadow = getPreviewSize(
+		previewDevice,
+		undefined !== textShadow && undefined !== textShadow[0] && undefined !== textShadow[0].color
+			? textShadow[0].color
+			: 'rgba(0, 0, 0, 0.2)',
+		undefined !== textShadowTablet && undefined !== textShadowTablet[0] && undefined !== textShadowTablet[0].color
+			? textShadowTablet[0].color
+			: textShadow[0].color,
+		undefined !== textShadowMobile && undefined !== textShadowMobile[0] && undefined !== textShadowMobile[0].color
+			? textShadowMobile[0].color
+			: textShadowTablet[0].color
+			? textShadowTablet[0].color
+			: textShadow[0].color
+	);
+	const previewHOffset = getPreviewSize(
+		previewDevice,
+		undefined !== textShadow && undefined !== textShadow[0] && undefined !== textShadow[0].hOffset
+			? textShadow[0].hOffset
+			: 1,
+		undefined !== textShadowTablet && undefined !== textShadowTablet[0] && undefined !== textShadowTablet[0].hOffset
+			? textShadowTablet[0].hOffset
+			: '',
+		undefined !== textShadowMobile && undefined !== textShadowMobile[0] && undefined !== textShadowMobile[0].hOffset
+			? textShadowMobile[0].hOffset
+			: ''
+	);
+	const previewVOffset = getPreviewSize(
+		previewDevice,
+		undefined !== textShadow && undefined !== textShadow[0] && undefined !== textShadow[0].vOffset
+			? textShadow[0].vOffset
+			: 1,
+
+		undefined !== textShadowTablet && undefined !== textShadowTablet[0] && undefined !== textShadowTablet[0].vOffset
+			? textShadowTablet[0].vOffset
+			: '',
+
+		undefined !== textShadowMobile && undefined !== textShadowMobile[0] && undefined !== textShadowMobile[0].vOffset
+			? textShadowMobile[0].vOffset
+			: ''
+	);
+	const previewBlur = getPreviewSize(
+		previewDevice,
+		undefined !== textShadow && undefined !== textShadow[0] && undefined !== textShadow[0].blur
+			? textShadow[0].blur
+			: 1,
+
+		undefined !== textShadowTablet && undefined !== textShadowTablet[0] && undefined !== textShadowTablet[0].blur
+			? textShadowTablet[0].blur
+			: '',
+
+		undefined !== textShadowMobile && undefined !== textShadowMobile[0] && undefined !== textShadowMobile[0].blur
+			? textShadowMobile[0].blur
+			: ''
+	);
 	let previewJustifyAlign = previewAlign;
 	switch (previewAlign) {
 		case 'left':
@@ -925,21 +1037,23 @@ function KadenceAdvancedHeading(props) {
 							: undefined,
 						textTransform: textTransform ? textTransform : undefined,
 						fontFamily: typography ? renderTypography : '',
-						textShadow:
-							undefined !== textShadow &&
-							undefined !== textShadow[0] &&
-							undefined !== textShadow[0].enable &&
-							textShadow[0].enable
-								? (undefined !== textShadow[0].hOffset ? textShadow[0].hOffset : 1) +
-								  'px ' +
-								  (undefined !== textShadow[0].vOffset ? textShadow[0].vOffset : 1) +
-								  'px ' +
-								  (undefined !== textShadow[0].blur ? textShadow[0].blur : 1) +
-								  'px ' +
-								  (undefined !== textShadow[0].color
-										? KadenceColorOutput(textShadow[0].color)
-										: 'rgba(0,0,0,0.2)')
-								: undefined,
+						textShadow: enableTextShadow
+							? `${previewHOffset}px ${previewVOffset}px ${previewBlur}px ${KadenceColorOutput(
+									previewColorTextShadow
+							  )}`
+							: textShadow[0].enable && previewDevice === 'Tablet'
+							? `${textShadow[0].hOffset}px ${textShadow[0].vOffset}px ${
+									textShadow[0].blur
+							  }px ${KadenceColorOutput(textShadow[0].color)}`
+							: textShadowTablet[0].enable && previewDevice === 'Mobile'
+							? `${textShadowTablet[0].hOffset}px ${textShadowTablet[0].vOffset}px ${
+									textShadowTablet[0].blur
+							  }px ${KadenceColorOutput(textShadowTablet[0].color)}`
+							: textShadow[0].enable && previewDevice === 'Mobile'
+							? `${textShadow[0].hOffset}px ${textShadow[0].vOffset}px ${
+									textShadow[0].blur
+							  }px ${KadenceColorOutput(textShadow[0].color)}`
+							: undefined,
 					}}
 					placeholder={__('Write something…', 'kadence-blocks')}
 				/>
@@ -1669,60 +1783,39 @@ function KadenceAdvancedHeading(props) {
 								initialOpen={false}
 								panelName={'kb-adv-heading-text-shadow'}
 							>
-								<TextShadowControl
-									label={__('Text Shadow', 'kadence-blocks')}
-									enable={
-										undefined !== textShadow &&
-										undefined !== textShadow[0] &&
-										undefined !== textShadow[0].enable
-											? textShadow[0].enable
-											: false
-									}
-									color={
-										undefined !== textShadow &&
-										undefined !== textShadow[0] &&
-										undefined !== textShadow[0].color
-											? textShadow[0].color
-											: 'rgba(0, 0, 0, 0.2)'
-									}
-									colorDefault={'rgba(0, 0, 0, 0.2)'}
-									hOffset={
-										undefined !== textShadow &&
-										undefined !== textShadow[0] &&
-										undefined !== textShadow[0].hOffset
-											? textShadow[0].hOffset
-											: 1
-									}
-									vOffset={
-										undefined !== textShadow &&
-										undefined !== textShadow[0] &&
-										undefined !== textShadow[0].vOffset
-											? textShadow[0].vOffset
-											: 1
-									}
-									blur={
-										undefined !== textShadow &&
-										undefined !== textShadow[0] &&
-										undefined !== textShadow[0].blur
-											? textShadow[0].blur
-											: 1
-									}
-									onEnableChange={(value) => {
-										saveShadow({ enable: value });
-									}}
-									onColorChange={(value) => {
-										saveShadow({ color: value });
-									}}
-									onHOffsetChange={(value) => {
-										saveShadow({ hOffset: value });
-									}}
-									onVOffsetChange={(value) => {
-										saveShadow({ vOffset: value });
-									}}
-									onBlurChange={(value) => {
-										saveShadow({ blur: value });
+								<ToggleControl
+									label={'Enable Text Shadow'}
+									checked={enableTextShadow}
+									onChange={(value) => {
+										setAttributes({ enableTextShadow: value });
 									}}
 								/>
+								{enableTextShadow === true && (
+									<ResponsiveShadowControl
+										label={__('Text Shadow', 'kadence-blocks')}
+										enable={enableTextShadow}
+										color={previewColorTextShadow}
+										colorDefault={'rgba(0, 0, 0, 0.2)'}
+										hOffset={previewHOffset}
+										vOffset={previewVOffset}
+										blur={previewBlur}
+										onEnableChange={(value) => {
+											saveShadow({ enable: value });
+										}}
+										onColorChange={(value) => {
+											saveShadow({ color: value });
+										}}
+										onHOffsetChange={(value) => {
+											saveShadow({ hOffset: value });
+										}}
+										onVOffsetChange={(value) => {
+											saveShadow({ vOffset: value });
+										}}
+										onBlurChange={(value) => {
+											saveShadow({ blur: value });
+										}}
+									/>
+								)}
 							</KadencePanelBody>
 							{showSettings('iconSettings', 'kadence/advancedheading') && (
 								<KadencePanelBody
diff --git a/src/packages/components/src/index.js b/src/packages/components/src/index.js
index 35c7b83a4..afacbcf6d 100644
--- a/src/packages/components/src/index.js
+++ b/src/packages/components/src/index.js
@@ -106,6 +106,8 @@ export { default as MeasurementSingleControl } from './measurement/single-input-
 /* Color */
 export { default as AdvancedColorControlPalette } from './color/advanced-color-control-palette';
 export { default as BorderColorControls } from './color/border-color-control';
+export { default as ShadowControl } from './shadow/shadow-control';
+export { default as ResponsiveShadowControl } from './shadow/responsive-shadow-control';
 
 /* Block Defaults */
 export { default as KadenceBlockDefaults } from './block-defaults';
diff --git a/src/packages/components/src/shadow/responsive-shadow-control/index.js b/src/packages/components/src/shadow/responsive-shadow-control/index.js
new file mode 100644
index 000000000..e6139d8db
--- /dev/null
+++ b/src/packages/components/src/shadow/responsive-shadow-control/index.js
@@ -0,0 +1,178 @@
+/**
+ * Import Externals
+ */
+import PopColorControl from '../../pop-color-control';
+
+/**
+ * Internal block libraries
+ */
+import { __ } from '@wordpress/i18n';
+import {Component, useState} from '@wordpress/element';
+import { ToggleControl } from '@wordpress/components';
+import { map, isEqual } from 'lodash';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { default as ShadowControl } from '../shadow-control';
+
+import {
+	Dashicon,
+	Button,
+	ButtonGroup,
+} from '@wordpress/components';
+import {capitalizeFirstLetter} from '@kadence/helpers';
+import RangeControl from "../../range/range-control";
+import {undo} from "@wordpress/icons";
+
+/**
+ * Build the BoxShadow controls
+ * @returns {object} BoxShadow settings.
+ */
+export default function ResponsiveShadowControl ( {
+	label,
+	enable = true,
+	color,
+	colorDefault,
+	blur,
+	hOffset,
+	vOffset,
+	onColorChange,
+	onBlurChange,
+	onHOffsetChange,
+	onVOffsetChange,
+	onEnableChange,
+	className = '',
+	reset = true,
+} ) {
+	const [ deviceType, setDeviceType ] = useState( 'Desktop' );
+	const previewDevice = useSelect( ( select ) => {
+		return select( 'kadenceblocks/data' ).getPreviewDeviceType();
+	}, [] );
+	if ( previewDevice !== deviceType ) {
+		setDeviceType( previewDevice );
+	}
+	const {
+		setPreviewDeviceType,
+	} = useDispatch( 'kadenceblocks/data' );
+	const customSetPreviewDeviceType = ( device ) => {
+		setPreviewDeviceType( capitalizeFirstLetter( device ) );
+		setDeviceType( capitalizeFirstLetter( device ) );
+	};
+
+	const onReset = () => {
+		onEnableChange('reset');
+	}
+	const devices = [
+		{
+			name: 'Desktop',
+			key: 'desktop',
+			title: <Dashicon icon="desktop" />,
+			itemClass: 'kb-desk-tab',
+		},
+		{
+			name: 'Tablet',
+			key: 'tablet',
+			title: <Dashicon icon="tablet" />,
+			itemClass: 'kb-tablet-tab',
+		},
+		{
+			name: 'Mobile',
+			key: 'mobile',
+			title: <Dashicon icon="smartphone" />,
+			itemClass: 'kb-mobile-tab',
+		},
+	];
+	const output = {};
+	output.Mobile = (
+		<ShadowControl
+			key={'mobile-text-shadow-control'}
+			label={__('Text Shadow', 'kadence-blocks')}
+			enable={ enable }
+			color={ color }
+			colorDefault={ colorDefault }
+			hOffset={ hOffset }
+			vOffset={ vOffset }
+			blur={ blur }
+			onEnableChange={ onEnableChange }
+			onColorChange={ onColorChange }
+			onHOffsetChange={ onHOffsetChange }
+			onVOffsetChange={ onVOffsetChange }
+			onBlurChange={ onBlurChange }
+		/>
+	);
+	output.Tablet = (
+		<ShadowControl
+			key={'tablet-text-shadow-control'}
+			label={__('Text Shadow', 'kadence-blocks')}
+			enable={ enable }
+			color={ color }
+			colorDefault={ colorDefault }
+			hOffset={ hOffset }
+			vOffset={ vOffset }
+			blur={ blur }
+			onEnableChange={ onEnableChange }
+			onColorChange={ onColorChange }
+			onHOffsetChange={ onHOffsetChange }
+			onVOffsetChange={ onVOffsetChange }
+			onBlurChange={ onBlurChange }
+		/>
+	);
+	output.Desktop = (
+		<ShadowControl
+			key={'desktop-text-shadow-control'}
+			label={__('Text Shadow', 'kadence-blocks')}
+			enable={ enable }
+			color={ color }
+			colorDefault={ colorDefault }
+			hOffset={ hOffset }
+			vOffset={ vOffset }
+			blur={ blur }
+			onEnableChange={ onEnableChange }
+			onColorChange={ onColorChange }
+			onHOffsetChange={ onHOffsetChange }
+			onVOffsetChange={ onVOffsetChange }
+			onBlurChange={ onBlurChange }
+		/>
+	);
+
+	return [
+		onEnableChange && (
+			<div className={ `components-base-control kb-responsive-range-control${ '' !== className ? ' ' + className : '' }` }>
+				<div className="kadence-title-bar">
+					{ label && (
+						<span className="kadence-control-title">
+								{ label }
+							{ reset && (
+								<Button
+									className="is-reset is-single"
+									isSmall
+									disabled={ enable === false }
+									icon={ undo }
+									onClick={() => {
+										if (typeof reset === 'function') {
+											reset();
+										} else {
+											onReset();
+										}
+									}}
+								></Button>
+							) }
+						</span>
+					) }
+					<ButtonGroup className="kb-measure-responsive-options" aria-label={ __( 'Device', 'kadence-blocks' ) }>
+						{ map( devices, ( { name, key, title, itemClass } ) => (
+							<Button
+								key={ key }
+								className={ `kb-responsive-btn ${ itemClass }${ name === deviceType ? ' is-active' : '' }` }
+								isSmall
+								aria-pressed={ deviceType === name }
+								onClick={ () => customSetPreviewDeviceType( name ) }
+							>
+								{ title }
+							</Button>
+						) ) }
+					</ButtonGroup>
+				</div>
+				{ ( output[ deviceType ] ? output[ deviceType ] : output.Desktop ) }
+			</div>
+		)
+	];
+}
diff --git a/src/packages/components/src/shadow/shadow-control/index.js b/src/packages/components/src/shadow/shadow-control/index.js
new file mode 100644
index 000000000..8f8ca07fc
--- /dev/null
+++ b/src/packages/components/src/shadow/shadow-control/index.js
@@ -0,0 +1,103 @@
+/**
+ * BoxShadow Component
+ *
+ */
+
+/**
+ * Import Externals
+ */
+import PopColorControl from '../../pop-color-control';
+
+/**
+ * Internal block libraries
+ */
+import { __ } from '@wordpress/i18n';
+import { Component } from '@wordpress/element';
+import { ToggleControl } from '@wordpress/components';
+/**
+ * Build the Shadow controls
+ * @returns {object} Shadow settings.
+ */
+const ShadowControl = ( {
+	label,
+	enable = true,
+	color,
+	colorDefault,
+	blur,
+	hOffset,
+	vOffset,
+	onColorChange,
+	onBlurChange,
+	onHOffsetChange,
+	onVOffsetChange,
+	onEnableChange
+} ) => (
+	<div className="kb-shadow-container components-base-control">
+		{ label && (
+			<div className="kt-box-shadow-label">
+				<h2 className="kt-beside-color-label">{ label }</h2>
+			</div>
+		) }
+			<div className="kt-inner-sub-section">
+				<div className="kt-inner-sub-section-row">
+					<div className="kt-box-color-settings kt-box-shadow-subset">
+						<p className="kt-box-shadow-title">{ __( 'Color', 'kadence-blocks' ) }</p>
+						<PopColorControl
+							value={ ( color ? color : colorDefault ) }
+							default={ colorDefault }
+							onChange={ value => onColorChange( value ) }
+						/>
+					</div>
+					<div className="kt-box-x-settings kt-box-shadow-subset">
+						<p className="kt-box-shadow-title">{ 'X' }</p>
+						<div className="components-base-control kt-boxshadow-number-input">
+							<div className="components-base-control__field">
+								<input
+									value={ ( undefined !== hOffset ? hOffset : '' ) }
+									onChange={ event => onHOffsetChange( Number( event.target.value ) ) }
+									min={ -200 }
+									max={ 200 }
+									step={ 1 }
+									type="number"
+									className="components-text-control__input"
+								/>
+							</div>
+						</div>
+					</div>
+					<div className="kt-box-y-settings kt-box-shadow-subset">
+						<p className="kt-box-shadow-title">{ 'Y' }</p>
+						<div className="components-base-control kt-boxshadow-number-input">
+							<div className="components-base-control__field">
+								<input
+									value={ ( undefined !== vOffset ? vOffset : '' ) }
+									onChange={ event => onVOffsetChange( Number( event.target.value ) ) }
+									min={ -200 }
+									max={ 200 }
+									step={ 1 }
+									type="number"
+									className="components-text-control__input"
+								/>
+							</div>
+						</div>
+					</div>
+					<div className="kt-box-blur-settings kt-box-shadow-subset">
+						<p className="kt-box-shadow-title">{ 'Blur' }</p>
+						<div className="components-base-control kt-boxshadow-number-input">
+							<div className="components-base-control__field">
+								<input
+									value={ ( undefined !== blur ? blur : '' ) }
+									onChange={ event => onBlurChange( Number( event.target.value ) ) }
+									min={ 0 }
+									max={ 200 }
+									step={ 1 }
+									type="number"
+									className="components-text-control__input"
+								/>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+	</div>
+);
+export default ShadowControl;