diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php
index 862a1bfe2b28c6..fbff977cb9fb2d 100644
--- a/lib/experimental/editor-settings.php
+++ b/lib/experimental/editor-settings.php
@@ -89,6 +89,9 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-block-inspector-tabs', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableBlockInspectorTabs = true', 'before' );
 	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-global-styles-custom-css', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableGlobalStylesCustomCSS = true', 'before' );
+	}
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );
diff --git a/lib/experiments-page.php b/lib/experiments-page.php
index 6051aed56bc405..83e926da520e93 100644
--- a/lib/experiments-page.php
+++ b/lib/experiments-page.php
@@ -89,6 +89,22 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-global-styles-custom-css',
+		__( 'Global styles custom css ', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => sprintf(
+				/* translators: %s: WordPress documentation for roles and capabilities. */
+				__( 'Test the Global Styles custom CSS field in the site editor. This requires a user to have <a href="%s">unfiltered html capabilities</a>.', 'gutenberg' ),
+				'https://wordpress.org/support/article/roles-and-capabilities/#unfiltered_html'
+			),
+			'id'    => 'gutenberg-global-styles-custom-css',
+		)
+	);
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'
diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
index ecb68d27b7f4d7..0d7959f59fe95b 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -35,6 +35,8 @@ function ScreenRoot() {
 		};
 	}, [] );
 
+	const __experimentalGlobalStylesCustomCSS =
+		window?.__experimentalEnableGlobalStylesCustomCSS;
 	return (
 		<Card size="small">
 			<CardBody>
@@ -100,33 +102,38 @@ function ScreenRoot() {
 				</ItemGroup>
 			</CardBody>
 
-			<CardDivider />
-
-			<CardBody>
-				<Spacer
-					as="p"
-					paddingTop={ 2 }
-					paddingX="13px"
-					marginBottom={ 4 }
-				>
-					{ __(
-						'Add your own CSS to customize the appearance and layout of your site.'
-					) }
-				</Spacer>
-				<ItemGroup>
-					<NavigationButtonAsItem
-						path="/css"
-						aria-label={ __( 'Additional CSS' ) }
-					>
-						<HStack justify="space-between">
-							<FlexItem>{ __( 'Custom' ) }</FlexItem>
-							<IconWithCurrentColor
-								icon={ isRTL() ? chevronLeft : chevronRight }
-							/>
-						</HStack>
-					</NavigationButtonAsItem>
-				</ItemGroup>
-			</CardBody>
+			{ __experimentalGlobalStylesCustomCSS && (
+				<>
+					<CardDivider />
+					<CardBody>
+						<Spacer
+							as="p"
+							paddingTop={ 2 }
+							paddingX="13px"
+							marginBottom={ 4 }
+						>
+							{ __(
+								'Add your own CSS to customize the appearance and layout of your site.'
+							) }
+						</Spacer>
+						<ItemGroup>
+							<NavigationButtonAsItem
+								path="/css"
+								aria-label={ __( 'Additional CSS' ) }
+							>
+								<HStack justify="space-between">
+									<FlexItem>{ __( 'Custom' ) }</FlexItem>
+									<IconWithCurrentColor
+										icon={
+											isRTL() ? chevronLeft : chevronRight
+										}
+									/>
+								</HStack>
+							</NavigationButtonAsItem>
+						</ItemGroup>
+					</CardBody>
+				</>
+			) }
 		</Card>
 	);
 }