diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
index 4e581046585663..b5570b5a904a10 100644
--- a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
+++ b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
@@ -65,6 +65,7 @@ export const PanelColorGradientSettingsInner = ( {
 				'block-editor-panel-color-gradient-settings',
 				className
 			) }
+			hasInnerWrapper
 			label={ showTitle ? title : undefined }
 			resetAll={ () => {
 				batch( () => {
@@ -88,23 +89,26 @@ export const PanelColorGradientSettingsInner = ( {
 			__experimentalFirstVisibleItemClass="first"
 			__experimentalLastVisibleItemClass="last"
 		>
-			<ColorGradientSettingsDropdown
-				settings={ settings }
-				panelId={ panelId }
-				{ ...{
-					colors,
-					gradients,
-					disableCustomColors,
-					disableCustomGradients,
-					__experimentalIsRenderedInSidebar,
-					enableAlpha,
-				} }
-			/>
-			{ !! children && (
-				<>
-					<Spacer marginY={ 4 } /> { children }
-				</>
-			) }
+			<div className="block-editor-panel-color-gradient-settings__inner-wrapper">
+				<ColorGradientSettingsDropdown
+					settings={ settings }
+					panelId={ panelId }
+					{ ...{
+						colors,
+						gradients,
+						disableCustomColors,
+						disableCustomGradients,
+						__experimentalIsRenderedInSidebar,
+						enableAlpha,
+					} }
+				/>
+				{ !! children && (
+					<>
+						<Spacer marginTop={ 4 } marginBottom={ 0 } />
+						{ children }
+					</>
+				) }
+			</div>
 		</ToolsPanel>
 	);
 };
diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index 0a1ce17eedab73..6b3331b3f9a3f1 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -24,13 +24,6 @@ $swatch-gap: 12px;
 	min-width: 0;
 }
 
-.block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings {
-	&,
-	& > div:not(:first-of-type) {
-		display: block;
-	}
-}
-
 .block-editor-panel-color-gradient-settings {
 	@media screen and (min-width: $break-medium) {
 		.components-circular-option-picker__swatches {
@@ -46,6 +39,23 @@ $swatch-gap: 12px;
 		margin-bottom: inherit;
 	}
 
+	/* Increased specificity required to remove the slot wrapper's row gap */
+	&#{&} {
+		.block-editor-panel-color-gradient-settings__inner-wrapper {
+			// `ToolsPanel` spans the inner wrapper across its grid via a
+			// positional selector that assumes a header is present. This panel
+			// can render without one (`showTitle={ false }`), so span it here.
+			grid-column: 1 / -1;
+			row-gap: 0;
+
+			// Unlike the other panels using an inner wrapper, this component
+			// accepts arbitrary children. Those carry no `ToolsPanelItem`
+			// class, so they'd otherwise be auto-placed into a single column.
+			> * {
+				grid-column: 1 / -1;
+			}
+		}
+	}
 }
 
 .block-editor-panel-color-gradient-settings__dropdown-content {