diff --git a/packages/edit-site/src/components/global-styles/screen-shadows.js b/packages/edit-site/src/components/global-styles/screen-shadows.js
index 82edff6481de7b..3645787f9a77f6 100644
--- a/packages/edit-site/src/components/global-styles/screen-shadows.js
+++ b/packages/edit-site/src/components/global-styles/screen-shadows.js
@@ -1,35 +1,13 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
 /**
  * Internal dependencies
  */
-import ScreenHeader from './header';
 import ShadowsPanel from './shadows-panel';
-import { unlock } from '../../lock-unlock';
+import ShadowsEditPanel from './shadows-edit-panel';
 
-const { useGlobalSetting, useSettingsForBlockElement } =
-	unlock( blockEditorPrivateApis );
-
-function ScreenShadows() {
-	// const [ rawSettings ] = useGlobalSetting( '' );
-	// const settings = useSettingsForBlockElement( rawSettings );
-	return (
-		<>
-			<ScreenHeader
-                title={ __( 'Shadows' ) } 
-                description={ __(
-					'Shadows and the application of those shadows on site elements.'
-				) }
-            />
-            <div className="edit-site-global-styles-screen">
-                <ShadowsPanel />
-            </div>
-		</>
-	);
+export function ScreenShadows() {
+	return <ShadowsPanel />;
 }
 
-export default ScreenShadows;
+export function ScreenShadowsEdit() {
+	return <ShadowsEditPanel />;
+}
diff --git a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
new file mode 100644
index 00000000000000..780b5684f62030
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
@@ -0,0 +1,364 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalSpacer as Spacer,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHeading as Heading,
+	__experimentalUnitControl as UnitControl,
+	__experimentalGrid as Grid,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+	__experimentalUseNavigator as useNavigator,
+	Dropdown,
+	RangeControl,
+	Button,
+	FlexItem,
+	ColorPicker,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import {
+	Icon,
+	plus,
+	shadow as shadowIcon,
+	lineSolid,
+	settings,
+} from '@wordpress/icons';
+import { useState, useMemo } from '@wordpress/element';
+import { debounce } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import Subtitle from './subtitle';
+import ScreenHeader from './header';
+import { defaultShadow } from './shadows-panel';
+import {
+	getShadowParts,
+	shadowStringToObject,
+	shadowObjectToString,
+} from './utils';
+
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+
+export default function ShadowsEditPanel() {
+	const {
+		params: { category, slug },
+	} = useNavigator();
+	const [ shadows, setShadows ] = useGlobalSetting(
+		`shadow.presets.${ category }`
+	);
+	const selectedShadow = useMemo(
+		() => ( shadows || [] ).find( ( shadow ) => shadow.slug === slug ),
+		[ shadows, slug ]
+	);
+	const onShadowChange = debounce( ( shadow ) => {
+		const updatedShadow = { ...( selectedShadow || {} ), shadow };
+		setShadows(
+			shadows.map( ( s ) => ( s.slug === slug ? updatedShadow : s ) )
+		);
+	}, 100 );
+
+	return (
+		<>
+			<ScreenHeader title={ selectedShadow.name } />
+			<div className="edit-site-global-styles-screen">
+				<ShadowsPreview shadow={ selectedShadow.shadow } />
+				<ShadowEditor
+					shadow={ selectedShadow.shadow }
+					onChange={ onShadowChange }
+				/>
+			</div>
+		</>
+	);
+}
+
+function ShadowsPreview( { shadow } ) {
+	const shadowStyle = {
+		boxShadow: shadow,
+	};
+
+	return (
+		<Spacer marginBottom={ 4 } marginTop={ -2 }>
+			<HStack
+				align="center"
+				justify="center"
+				className="edit-site-global-styles__shadow-preview-panel"
+			>
+				<div
+					className="edit-site-global-styles__shadow-preview-block"
+					style={ shadowStyle }
+				/>
+			</HStack>
+		</Spacer>
+	);
+}
+
+function ShadowEditor( { shadow, onChange } ) {
+	const shadowParts = getShadowParts( shadow );
+
+	const onChangeShadowPart = ( index, part ) => {
+		shadowParts[ index ] = part;
+		onChange( shadowParts.join( ', ' ) );
+	};
+
+	const onAddShadowPart = () => {
+		shadowParts.push( defaultShadow );
+		onChange( shadowParts.join( ', ' ) );
+	};
+
+	const onRemoveShadowPart = ( index ) => {
+		shadowParts.splice( index, 1 );
+		onChange( shadowParts.join( ', ' ) );
+	};
+
+	return (
+		<>
+			<VStack spacing={ 8 }>
+				<HStack justify="space-between">
+					<FlexItem>
+						<Subtitle level={ 3 }>{ 'Shadows' }</Subtitle>
+					</FlexItem>
+					<FlexItem>
+						<Button
+							size="small"
+							icon={ plus }
+							label={ __( 'Add shadow' ) }
+							onClick={ () => {
+								onAddShadowPart();
+							} }
+						/>
+					</FlexItem>
+				</HStack>
+			</VStack>
+			<Spacer />
+			<ItemGroup isBordered isSeparated>
+				{ shadowParts.map( ( part, index ) => (
+					<ShadowItem
+						key={ index }
+						shadow={ part }
+						onChange={ ( value ) =>
+							onChangeShadowPart( index, value )
+						}
+						canRemove={ shadowParts.length > 1 }
+						onRemove={ () => onRemoveShadowPart( index ) }
+					/>
+				) ) }
+			</ItemGroup>
+		</>
+	);
+}
+
+function ShadowItem( { shadow, onChange, canRemove, onRemove } ) {
+	const popoverProps = {
+		placement: 'left-start',
+		offset: 36,
+		shift: true,
+	};
+
+	return (
+		<Dropdown
+			popoverProps={ popoverProps }
+			className="block-editor-tools-panel-color-gradient-settings__dropdown"
+			renderToggle={ ( { onToggle, isOpen } ) => {
+				const toggleProps = {
+					onClick: onToggle,
+					className: classnames(
+						'block-editor-panel-color-gradient-settings__dropdown',
+						{ 'is-open': isOpen }
+					),
+				};
+
+				return (
+					<Button { ...toggleProps }>
+						<HStack align="center" justify="flex-start">
+							<FlexItem
+								display="flex"
+								style={ {
+									marginLeft: '-4px',
+								} }
+							>
+								<Icon icon={ shadowIcon } />
+							</FlexItem>
+							<FlexItem style={ { flexGrow: 1 } }>
+								Drop shadow
+							</FlexItem>
+							{ canRemove && (
+								<FlexItem
+									display="flex"
+									style={ {
+										marginRight: '-4px',
+									} }
+									onClick={ ( e ) => {
+										e.stopPropagation();
+										onRemove();
+									} }
+								>
+									<Icon icon={ lineSolid } />
+								</FlexItem>
+							) }
+						</HStack>
+					</Button>
+				);
+			} }
+			renderContent={ () => (
+				<DropdownContentWrapper paddingSize="none">
+					<div className="block-editor-panel-color-gradient-settings__dropdown-content">
+						<ShadowPopover
+							shadow={ shadow }
+							onChange={ onChange }
+						/>
+					</div>
+				</DropdownContentWrapper>
+			) }
+		/>
+	);
+}
+
+function ShadowPopover( { shadow: savedShadow, onChange } ) {
+	const shadowObj = shadowStringToObject( savedShadow );
+	const [ shadow, setShadow ] = useState( {
+		x: shadowObj.x,
+		y: shadowObj.y,
+		blur: shadowObj.blur,
+		spread: shadowObj.spread,
+		color: shadowObj.color,
+		inset: shadowObj.inset,
+	} );
+
+	const onShadowChange = ( key, value ) => {
+		onChange( shadowObjectToString( shadow ) );
+		setShadow( {
+			...shadow,
+			[ key ]: value,
+		} );
+	};
+
+	return (
+		<div style={ { width: '260px', padding: '16px' } }>
+			<VStack>
+				<Heading level={ 5 }>{ __( 'Drop shadow' ) }</Heading>
+				<Spacer marginBottom={ 4 } />
+				<ShadowColorPicker
+					color={ shadow.color }
+					onChange={ ( value ) => onShadowChange( 'color', value ) }
+				/>
+				<Spacer marginBottom={ 4 } />
+				<Grid id={ 'grid-123' } columns={ 2 } gap={ 6 } rowGap={ 2 }>
+					<ShadowInputControl
+						label="X position"
+						value={ shadow.x }
+						onChange={ ( value ) => onShadowChange( 'x', value ) }
+					/>
+					<ShadowInputControl
+						label="Y position"
+						value={ shadow.y }
+						onChange={ ( value ) => onShadowChange( 'y', value ) }
+					/>
+					<ShadowInputControl
+						label="Blur"
+						value={ shadow.blur }
+						onChange={ ( value ) =>
+							onShadowChange( 'blur', value )
+						}
+					/>
+					<ShadowInputControl
+						label="Spread"
+						value={ shadow.spread }
+						onChange={ ( value ) =>
+							onShadowChange( 'spread', value )
+						}
+					/>
+				</Grid>
+			</VStack>
+		</div>
+	);
+}
+
+function ShadowColorPicker( { color, onChange } ) {
+	const popoverProps = {
+		placement: 'left-start',
+		offset: 36,
+		shift: true,
+	};
+
+	return (
+		<Dropdown
+			popoverProps={ popoverProps }
+			className="block-editor-tools-panel-color-gradient-settings__dropdown"
+			renderToggle={ ( { onToggle, isOpen } ) => {
+				const toggleProps = {
+					onClick: onToggle,
+					className: classnames(
+						'block-editor-panel-color-gradient-settings__dropdown',
+						{ 'is-open': isOpen }
+					),
+				};
+
+				return (
+					<Button
+						{ ...toggleProps }
+						style={ { background: color, height: '64px' } }
+					/>
+				);
+			} }
+			renderContent={ () => (
+				<DropdownContentWrapper paddingSize="none">
+					<div className="block-editor-panel-color-gradient-settings__dropdown-content">
+						<ColorPicker
+							color={ color }
+							onChange={ onChange }
+							enableAlpha
+							defaultColor={ '#000' }
+						/>
+					</div>
+				</DropdownContentWrapper>
+			) }
+		/>
+	);
+}
+
+function ShadowInputControl( { label, value, onChange } ) {
+	const [ useInput, setUseInput ] = useState( false );
+
+	return (
+		<VStack justify={ 'flex-start' }>
+			<HStack justify="space-between">
+				<Subtitle>{ label }</Subtitle>
+				<Button
+					label={ __( 'Label' ) }
+					icon={ settings }
+					onClick={ () => {
+						setUseInput( ! useInput );
+					} }
+					isPressed={ useInput }
+					size="small"
+				/>
+			</HStack>
+			{ useInput ? (
+				<UnitControl
+					label={ label }
+					hideLabelFromVision
+					value={ value }
+					onChange={ onChange }
+				/>
+			) : (
+				<RangeControl
+					value={ value }
+					onChange={ onChange }
+					withInputField={ false }
+					min={ 0 }
+					max={ 10 }
+				/>
+			) }
+		</VStack>
+	);
+}
diff --git a/packages/edit-site/src/components/global-styles/shadows-panel.js b/packages/edit-site/src/components/global-styles/shadows-panel.js
index 6d81909974ee32..2e3112eb2c13c8 100644
--- a/packages/edit-site/src/components/global-styles/shadows-panel.js
+++ b/packages/edit-site/src/components/global-styles/shadows-panel.js
@@ -1,350 +1,139 @@
 /**
  * WordPress dependencies
  */
-import { useViewportMatch } from '@wordpress/compose';
 import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
-    __experimentalSpacer as Spacer,
-    __experimentalItemGroup as ItemGroup,
-    __experimentalHeading as Heading,
-    __experimentalInputControl as InputControl,
-    Popover,
-    RangeControl,
-    Button,
-    DropdownMenu,
-    NavigableMenu,
-    privateApis as componentsPrivateApis,
+	__experimentalItemGroup as ItemGroup,
+	Button,
+	FlexItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { Icon, check, plus, moreVertical, shadow as shadowIcon, lineSolid } from '@wordpress/icons';
-import { useState, useMemo, useEffect } from '@wordpress/element';
+import { Icon, plus, shadow as shadowIcon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
 import Subtitle from './subtitle';
+import { NavigationButtonAsItem } from './navigation-button';
+import ScreenHeader from './header';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
-const shadowIndicatorStyle = {
-    border: '1px solid #e0e0e0',
-    borderRadius: '2px',
-    boxSizing: 'border-box',
-    color: '#2f2f2f',
-    cursor: 'default',
-    height: '26px',
-    width: '26px',
-    padding: 0,
-}
+export const defaultShadow = '6px 6px #000';
 
 export default function ShadowsPanel() {
-    const [ defaultShadows, setDefaultShadows ] = useGlobalSetting(
-		'shadow.presets.default',
-	);
-    const [ themeShadows, setThemeShadows ] = useGlobalSetting(
-		'shadow.presets.theme'
-	);
-    const [ customShadows, setCustomShadows ] = useGlobalSetting(
+	const [ defaultShadows ] = useGlobalSetting( 'shadow.presets.default' );
+	const [ themeShadows ] = useGlobalSetting( 'shadow.presets.theme' );
+	const [ customShadows, setCustomShadows ] = useGlobalSetting(
 		'shadow.presets.custom'
 	);
 
-    return <VStack
-			className="edit-site-global-styles-shadows-panel"
-			spacing={ 7 }
-		>
-            <ShadowsEditor label={ __( 'Default' ) } shadows={ defaultShadows || [] } />
-            <ShadowsEditor label={ __( 'Theme' ) } shadows={ themeShadows || [] } placeholder={ __('Theme shadows are empty!') } />
-            <ShadowsEditor label={ __( 'Custom' ) } shadows={ customShadows || [] } placeholder={ __('Custom shadows are empty!') } isCustom={true} onCreate={setCustomShadows}/>
-        </VStack>;
-}
-
-function ShadowsEditor({label, placeholder, shadows: savedShadows, isCustom, onCreate}) {
-    const [isEditing, setIsEditing] = useState(false);
-    const [shadows, setShadows] = useState(savedShadows || []);
-
-    // useEffect(() => {
-    //     setShadows(savedShadows);
-    // }, [savedShadows]);
-
-    const handleAddShadow = () => {
-        const newShadows = [
-            ...shadows,
-            {
-                name: 'Custom shadow ' + (shadows.length + 1),
-                slug: 'custom-shadow-' + (shadows.length + 1),
-                shadow: '0 0 4px 4px rgba(0, 0, 0, 0.3)',
-            }
-        ]
-        setShadows(newShadows);
-
-        // onCreate();
-    }
-
-    const handleShadowChange = (index, shadow) => {
-        const newShadows = [
-            ...shadows.slice(0, index),
-            shadow,
-            ...shadows.slice(index + 1),
-        ];
-        setShadows(newShadows);
-    }
-
-    return <div>
-        <div style={{display: 'flex', justifyContent: 'space-between'}}>
-            <Subtitle level={2}>
-                { label }
-            </Subtitle>
-            <div style={{display: 'flex', alignItems: 'center'}}>
-                { isEditing && (
-                    <Button
-                        size="small"
-                        style={ { color: 'blue' } }
-                        onClick={ () => {
-                            setIsEditing( false );
-                        } }
-                    >
-                        { __( 'Done' ) }
-                    </Button>
-                ) }
-                {isCustom && <Button
-                    size="small"
-                    icon={ plus }
-                    label={ __( 'Add shadow' ) }
-                    onClick={ () => {
-                        handleAddShadow();
-                        setIsEditing( true );
-                    } }
-                />
-                }
-
-                {
-                    !shadows.length ? null : <DropdownMenu
-                    icon={ moreVertical }
-                    label={ __( 'Shadow options' ) }
-                    toggleProps={ {
-                        size: 'small',
-                    } }
-                >
-                    { ( { onClose } ) => (
-                    <NavigableMenu role="menu">
-                        <Button
-                            variant="tertiary"
-                            onClick={ () => {
-                                setIsEditing( true );
-                                onClose();
-                            } }
-                            className="components-palette-edit__menu-button"
-                        >
-                            { __( 'Show details' ) }
-                        </Button>
-                    </NavigableMenu>
-                    ) }
-                    </DropdownMenu>
-                }
-            </div>
-        </div>
-        <Spacer height={ 4 } />
-
-        { isEditing ? <ShadowsEditorView label={label} shadows={shadows} isCustom={isCustom} onChange={handleShadowChange} /> : <ShadowsReadOnlyView label={label} shadows={shadows} placeholder={placeholder} /> }
-        
-    </div>
-}
-
-function ShadowsReadOnlyView({label, shadows, placeholder}) {
-
-    const { CompositeV2: Composite, useCompositeStoreV2: useCompositeStore } =
-		unlock( componentsPrivateApis );
-	const compositeStore = useCompositeStore();
+	const onCreateShadow = ( shadow ) => {
+		setCustomShadows( [ ...( customShadows || [] ), shadow ] );
+	};
 
-    return <Composite
-    store={ compositeStore }
-    role="listbox"
-    className="block-editor-global-styles__shadow__list"
-    aria-label={ label }
->
-{ !shadows.length ? <span>{placeholder}</span> : shadows.map( ( { name, slug, shadow } ) => (
-    <ShadowIndicator
-        key={ slug }
-        label={ name }
-        shadow={ shadow }
-    />
-) ) }
-</Composite>
-}
-
-function ShadowIndicator( { label, isActive, onSelect, shadow } ) {
 	return (
-        <Button
-            onClick={ onSelect }
-            label={ label }
-            style={ { ...shadowIndicatorStyle, boxShadow: shadow } }
-            showTooltip
-        >
-            { isActive && <Icon icon={ check } /> }
-        </Button>
-    );
-}
-
-function ShadowsEditorView({label, shadows, isCustom, onChange}) {
-    return <VStack spacing={ 3 }>
-        <ItemGroup isRounded>
-            {
-                shadows.map( ( { name, slug, shadow }, index ) => (
-                    <ShadowEditableItem key={ slug } label={ name } shadow={ shadow } isCustom={isCustom} onChange={(updated) => onChange(index, ({
-                        name, slug,
-                        shadow: updated,
-                    }))} />
-                ) )
-            }
-        </ItemGroup>
-    </VStack>
-}
-
-function ShadowEditableItem({label, shadow, onChange, isCustom}) {
-    const [isEditing, setIsEditing] = useState(false);
-    const [ popoverAnchor, setPopoverAnchor ] = useState( null );
-    const popoverProps = useMemo(
-		() => ( {
-            placement: 'left-start',
-            offset: 36,
-            shift: true,
-			anchor: popoverAnchor,
-		} ),
-		[ popoverAnchor ]
+		<>
+			<ScreenHeader
+				title={ __( 'Shadows' ) }
+				description={ __(
+					'Shadows and the application of those shadows on site elements.'
+				) }
+			/>
+			<div className="edit-site-global-styles-screen">
+				<VStack
+					className="edit-site-global-styles-shadows-panel"
+					spacing={ 7 }
+				>
+					<ShadowList
+						label={ __( 'Default' ) }
+						shadows={ defaultShadows || [] }
+						category={ 'default' }
+					/>
+					<ShadowList
+						label={ __( 'Theme' ) }
+						shadows={ themeShadows || [] }
+						category={ 'theme' }
+						placeholder={ __( 'Theme shadows are empty!' ) }
+					/>
+					<ShadowList
+						label={ __( 'Custom' ) }
+						shadows={ customShadows || [] }
+						category={ 'custom' }
+						placeholder={ __( 'Custom shadows are empty!' ) }
+						onCreate={ onCreateShadow }
+					/>
+				</VStack>
+			</div>
+		</>
 	);
-
-    return <div>
-        <div ref={setPopoverAnchor} style={{display: 'flex', alignItems: 'center', padding: '6px', border: '1px solid rgba(0, 0, 0, 0.1)'}}>
-            <div style={{marginBottom: '-4px'}}>
-                <Icon icon={ shadowIcon } />
-            </div>
-            <div style={{flexGrow: 1, margin: '0 6px'}}>
-                {
-                    isCustom ? 
-                    <InputControl
-                        value={ label }
-                        onChange={ () => {} }
-                        onFocus={ () => {setIsEditing(true)} }
-                    /> : <div style={{cursor: 'pointer'}} onClick={() => {setIsEditing(true)}}>{label}</div>
-                }
-            </div>
-            <div style={{marginBottom: '-4px'}}>
-                <Icon icon={ lineSolid } />
-            </div>
-        </div>
-        {
-            isEditing && <ShadowPopover shadow={shadow} popoverProps={popoverProps} onClose={ () => setIsEditing( false ) } onChange={onChange} />
-        }
-    </div>
 }
 
-function ShadowPopover({shadow: savedShadow, popoverProps, onClose, onChange}) {
-    const shadowParts = shadowStringToObject(savedShadow || '');
-    const [ shadow, setShadow ] = useState( {
-        x: shadowParts.x, 
-        y: shadowParts.y, 
-        blur: shadowParts.blur, 
-        spread: shadowParts.spread, 
-        color: shadowParts.color,
-    } );
-
-    const shadowString = `${shadow.x}px ${shadow.y}px ${shadow.blur}px ${shadow.spread}px ${shadow.color}`;
+function ShadowList( { label, placeholder, shadows, category, onCreate } ) {
+	const handleAddShadow = () => {
+		onCreate( {
+			name: `Shadow ${ shadows.length + 1 }`,
+			shadow: defaultShadow,
+			slug: `shadow-${ shadows.length + 1 }`,
+		} );
+	};
 
-    const handleChange = ( key, value ) => {
-        onChange(shadowString);
-        setShadow( {
-            ...shadow,
-            [ key ]: value,
-        } );
-    };
-
-    return <Popover {...popoverProps} onClose={onClose}>
-        <div className="block-editor-global-styles__shadow-popover-container">
-			<VStack spacing={ 4 }>
-                <div style={{padding: '0.5rem'}}>
-				    <Heading level={ 5 }>{ __( 'Drop shadow' ) }</Heading>
-                </div>
-                <div style={{padding: '0.5rem',display:'flex',alignItems:'center',justifyContent:'center',overflow:'hidden'}}>
-                    <div style={ { ...shadowIndicatorStyle, boxShadow: shadowString } }
-                    ></div>
-                </div>
-				<div style={{padding:'0 1rem',display:'grid',gridTemplateColumns:'1fr 1fr',gap:'1rem'}}>
-                    <div>
-                        <RangeControl label="X position"
-                            value={ shadow.x }
-                            onChange={ ( value ) => handleChange( 'x', value ) }
-                            withInputField={ false }
-                            min={ 0 }
-                            max={ 10 }
-                        />
-                    </div>
-                    <div>
-                        <RangeControl label="Y position"
-                            value={ shadow.y }
-                            onChange={ ( value ) => handleChange( 'y', value ) }
-                            withInputField={ false }
-                            min={ 0 }
-                            max={ 10 }
-                        />
-                    </div>
-                    <div>
-                        <RangeControl label="Blur"
-                            value={ shadow.blur }
-                            onChange={ ( value ) => handleChange( 'blur', value ) }
-                            withInputField={ false }
-                            min={ 0 }
-                            max={ 10 }
-                        />
-                    </div>
-                    <div>
-                        <RangeControl label="Spread"
-                            value={ shadow.spread }
-                            onChange={ ( value ) => handleChange( 'spread', value ) }
-                            withInputField={ false }
-                            min={ 0 }
-                            max={ 10 }
-                        />
-                    </div>
-                    {/* <div>Color</div> */}
-                </div>
-			</VStack>
-		</div>
-    </Popover>
+	return (
+		<VStack spacing={ 3 }>
+			<HStack justify="space-between">
+				<FlexItem>
+					<Subtitle level={ 3 }>{ label }</Subtitle>
+				</FlexItem>
+				<FlexItem>
+					{ category === 'custom' && (
+						<Button
+							size="small"
+							icon={ plus }
+							label={ __( 'Add shadow' ) }
+							onClick={ () => {
+								handleAddShadow();
+							} }
+						/>
+					) }
+				</FlexItem>
+			</HStack>
+			{ shadows.length ? (
+				<ItemGroup isBordered isSeparated>
+					{ shadows.map( ( shadow ) => (
+						<ShadowItem
+							key={ shadow.slug }
+							shadow={ shadow }
+							category={ category }
+						/>
+					) ) }
+				</ItemGroup>
+			) : (
+				<div>{ placeholder }</div>
+			) }
+		</VStack>
+	);
 }
 
-function shadowStringToObject(shadow) {
-    const colorStart = shadow.indexOf('rgb');
-    let color = 'rgba(0, 0, 0, 0.5)';
-    let shadows = [];
-    if (colorStart !== -1) {
-        color = shadow.substring(colorStart);
-        shadows = shadow.substring(0, colorStart).trim().split(' ');
-    } else {
-        shadows = shadow.split(' ');
-    }
-
-    return shadows.length === 4 ? ({
-        x: parseInt(shadows[0].replace('px', '')),
-        y: parseInt(shadows[1].replace('px', '')),
-        blur: parseInt(shadows[2].replace('px', '')),
-        spread: parseInt(shadows[3].replace('px', '')),
-        color: color,
-    }) : shadows.length === 3 ? ({
-        x: parseInt(shadows[0].replace('px', '')),
-        y: parseInt(shadows[1].replace('px', '')),
-        blur: parseInt(shadows[2].replace('px', '')),
-        spread: 0,
-        color: color,
-    }) : shadows.length === 2 ? ({
-        x: parseInt(shadows[0].replace('px', '')),
-        y: parseInt(shadows[1].replace('px', '')),
-        blur: 0,
-        spread: 0,
-        color: color,
-    }) : ({
-        x: 0, y: 0, blur: 0, spread: 0, color: color,
-    });
+function ShadowItem( { shadow, category } ) {
+	return (
+		<NavigationButtonAsItem
+			path={ `/shadows/edit/${ category }/${ shadow.slug }` }
+			aria-label={ 'edit' }
+		>
+			<HStack justify="flex-start">
+				<FlexItem
+					className="edit-site-global-styles-screen-typography__indicator"
+					style={ {
+						marginLeft: '-4px',
+					} }
+				>
+					<Icon icon={ shadowIcon } />
+				</FlexItem>
+				<FlexItem>{ shadow.name }</FlexItem>
+			</HStack>
+		</NavigationButtonAsItem>
+	);
 }
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 5cd5c355fe0dbe..aedba317e402b5 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -112,6 +112,20 @@
 	border-radius: $radius-block-ui;
 }
 
+.edit-site-global-styles__shadow-preview-panel {
+	height: 150px;
+	border: $gray-200 $border-width solid;
+	border-radius: $radius-block-ui;
+	overflow: auto;
+}
+
+.edit-site-global-styles__shadow-preview-block {
+	border: $gray-200 $border-width solid;
+	border-radius: $radius-block-ui;
+	width: 60%;
+	height: 60px;
+}
+
 .edit-site-global-styles-screen-css {
 	flex: 1 1 auto;
 	display: flex;
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 577b2b7184831b..fd0a52a2ad062a 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -35,7 +35,7 @@ import ScreenTypography from './screen-typography';
 import ScreenTypographyElement from './screen-typography-element';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
-import ScreenShadows from './screen-shadows';
+import { ScreenShadows, ScreenShadowsEdit } from './screen-shadows';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
 import StyleBook from '../style-book';
@@ -338,6 +338,10 @@ function GlobalStylesUI() {
 				<ScreenShadows />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen path="/shadows/edit/:category/:slug">
+				<ScreenShadowsEdit />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen path="/layout">
 				<ScreenLayout />
 			</GlobalStylesNavigationScreen>
diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js
index 7e7948147b170a..b83141e4d3cdb4 100644
--- a/packages/edit-site/src/components/global-styles/utils.js
+++ b/packages/edit-site/src/components/global-styles/utils.js
@@ -47,3 +47,65 @@ export function getFontFamilies( themeJson ) {
 
 	return [ bodyFontFamily, headingFontFamily ];
 }
+
+export function getShadowParts( shadow ) {
+	const colorStart = shadow.indexOf( 'rgb' );
+	const pattern = /(?<=\)),?\s*/;
+	return shadow
+		.split( colorStart !== -1 ? pattern : ',' )
+		.map( ( part ) => part.trim() );
+}
+
+export function shadowStringToObject( shadow ) {
+	const colorStart = shadow.indexOf( 'rgb' );
+	const inset = shadow.indexOf( 'inset' ) !== -1;
+	let parts = [];
+	const defaultColor = '#000';
+	let { x, y, blur, spread, color } = {
+		x: 0,
+		y: 0,
+		blur: 0,
+		spread: 0,
+		color: defaultColor,
+	};
+
+	if ( colorStart !== -1 ) {
+		color = shadow.substring( colorStart );
+		parts = shadow.substring( 0, colorStart ).trim().split( ' ' );
+	} else {
+		parts = shadow.split( ' ' );
+		color = parts.pop();
+	}
+
+	if ( parts.length === 4 ) {
+		x = parseInt( parts[ 0 ].replace( 'px', '' ) );
+		y = parseInt( parts[ 1 ].replace( 'px', '' ) );
+		blur = parseInt( parts[ 2 ].replace( 'px', '' ) );
+		spread = parseInt( parts[ 3 ].replace( 'px', '' ) );
+	} else if ( parts.length === 3 ) {
+		x = parseInt( parts[ 0 ].replace( 'px', '' ) );
+		y = parseInt( parts[ 1 ].replace( 'px', '' ) );
+		blur = parseInt( parts[ 2 ].replace( 'px', '' ) );
+	} else if ( parts.length === 2 ) {
+		x = parseInt( parts[ 0 ].replace( 'px', '' ) );
+		y = parseInt( parts[ 1 ].replace( 'px', '' ) );
+	} else {
+		x = parseInt( parts[ 0 ].replace( 'px', '' ) );
+		y = parseInt( parts[ 1 ].replace( 'px', '' ) );
+	}
+
+	return { x, y, blur, spread, color, inset };
+}
+
+export function shadowObjectToString( shadowObj ) {
+	const shadowString = `${ shadowObj.x || 0 }px ${ shadowObj.y || 0 }px ${
+		shadowObj.blur || 0
+	}px ${ shadowObj.spread || 0 }px`;
+	if ( shadowObj.color ) {
+		return `${ shadowString } ${ shadowObj.color }`;
+	}
+	if ( shadowObj.inset ) {
+		return `inset ${ shadowString }`;
+	}
+	return shadowString;
+}