diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
index dc65ab06e65512..edfd5531003173 100644
--- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
+++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -14,6 +14,31 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   margin-bottom: inherit;
 }
 
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.emotion-4>*+*:not( marquee ) {
+  margin-top: calc(4px * 2);
+}
+
+.emotion-4>* {
+  min-height: 0;
+}
+
 <div
   className="components-base-control block-editor-color-gradient-control emotion-0 emotion-1"
 >
@@ -21,97 +46,103 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
     className="components-base-control__field emotion-2 emotion-3"
   >
     <fieldset>
-      <legend>
-        <div
-          className="block-editor-color-gradient-control__color-indicator"
-        >
-          <span
-            className="components-base-control__label"
+      <div
+        className="components-flex components-h-stack components-v-stack emotion-4 emotion-5"
+        data-wp-c16t={true}
+        data-wp-component="VStack"
+      >
+        <legend>
+          <div
+            className="block-editor-color-gradient-control__color-indicator"
           >
-            Test Color
             <span
-              aria-label="(Color: #f00)"
-              className="component-color-indicator"
-              style={
-                Object {
-                  "background": "#f00",
+              className="components-base-control__label"
+            >
+              Test Color
+              <span
+                aria-label="(Color: #f00)"
+                className="component-color-indicator"
+                style={
+                  Object {
+                    "background": "#f00",
+                  }
                 }
-              }
-            />
-          </span>
-        </div>
-      </legend>
-      <div
-        className="components-circular-option-picker"
-      >
+              />
+            </span>
+          </div>
+        </legend>
         <div
-          className="components-circular-option-picker__swatches"
+          className="components-circular-option-picker"
         >
           <div
-            className="components-circular-option-picker__option-wrapper"
+            className="components-circular-option-picker__swatches"
           >
-            <button
-              aria-describedby={null}
-              aria-label="Color: red"
-              aria-pressed={true}
-              className="components-button components-circular-option-picker__option is-pressed"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseEnter={[Function]}
-              onMouseLeave={[Function]}
-              style={
-                Object {
-                  "backgroundColor": "#f00",
-                  "color": "#f00",
-                }
-              }
-              type="button"
-            />
-            <svg
-              aria-hidden={true}
-              fill="#000"
-              focusable={false}
-              height={24}
-              role="img"
-              viewBox="0 0 24 24"
-              width={24}
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              className="components-circular-option-picker__option-wrapper"
             >
-              <path
-                d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
+              <button
+                aria-describedby={null}
+                aria-label="Color: red"
+                aria-pressed={true}
+                className="components-button components-circular-option-picker__option is-pressed"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                style={
+                  Object {
+                    "backgroundColor": "#f00",
+                    "color": "#f00",
+                  }
+                }
+                type="button"
               />
-            </svg>
+              <svg
+                aria-hidden={true}
+                fill="#000"
+                focusable={false}
+                height={24}
+                role="img"
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
+                />
+              </svg>
+            </div>
           </div>
-        </div>
-        <div
-          className="components-circular-option-picker__custom-clear-wrapper"
-        >
           <div
-            className="components-dropdown components-circular-option-picker__dropdown-link-action"
-            tabIndex="-1"
+            className="components-circular-option-picker__custom-clear-wrapper"
           >
+            <div
+              className="components-dropdown components-circular-option-picker__dropdown-link-action"
+              tabIndex="-1"
+            >
+              <button
+                aria-describedby={null}
+                aria-expanded={false}
+                aria-haspopup="true"
+                aria-label="Custom color picker"
+                className="components-button is-link"
+                onClick={[Function]}
+                type="button"
+              >
+                Custom color
+              </button>
+            </div>
             <button
               aria-describedby={null}
-              aria-expanded={false}
-              aria-haspopup="true"
-              aria-label="Custom color picker"
-              className="components-button is-link"
+              className="components-button components-circular-option-picker__clear is-secondary is-small"
               onClick={[Function]}
               type="button"
             >
-              Custom color
+              Clear
             </button>
           </div>
-          <button
-            aria-describedby={null}
-            className="components-button components-circular-option-picker__clear is-secondary is-small"
-            onClick={[Function]}
-            type="button"
-          >
-            Clear
-          </button>
         </div>
       </div>
     </fieldset>
diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
index b69ab19d1aedd0..8ec461342d0936 100644
--- a/packages/block-editor/src/components/colors-gradients/control.js
+++ b/packages/block-editor/src/components/colors-gradients/control.js
@@ -10,8 +10,9 @@ import { every, isEmpty } from 'lodash';
 import { useState } from '@wordpress/element';
 import {
 	BaseControl,
-	Button,
-	ButtonGroup,
+	__experimentalVStack as VStack,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	ColorIndicator,
 	ColorPalette,
 	GradientPicker,
@@ -110,66 +111,68 @@ function ColorGradientControlInner( {
 			) }
 		>
 			<fieldset>
-				<legend>
-					<div className="block-editor-color-gradient-control__color-indicator">
-						<BaseControl.VisualLabel>
-							<VisualLabel
-								currentTab={ currentTab }
-								label={ label }
-								colorValue={ colorValue }
-								gradientValue={ gradientValue }
-							/>
-						</BaseControl.VisualLabel>
-					</div>
-				</legend>
-				{ canChooseAColor && canChooseAGradient && (
-					<ButtonGroup className="block-editor-color-gradient-control__button-tabs">
-						<Button
-							isSmall
-							isPressed={ currentTab === 'color' }
-							onClick={ () => setCurrentTab( 'color' ) }
-						>
-							{ __( 'Solid' ) }
-						</Button>
-						<Button
-							isSmall
-							isPressed={ currentTab === 'gradient' }
-							onClick={ () => setCurrentTab( 'gradient' ) }
+				<VStack space={ 3 }>
+					<legend>
+						<div className="block-editor-color-gradient-control__color-indicator">
+							<BaseControl.VisualLabel>
+								<VisualLabel
+									currentTab={ currentTab }
+									label={ label }
+									colorValue={ colorValue }
+									gradientValue={ gradientValue }
+								/>
+							</BaseControl.VisualLabel>
+						</div>
+					</legend>
+					{ canChooseAColor && canChooseAGradient && (
+						<ToggleGroupControl
+							value={ currentTab }
+							onChange={ setCurrentTab }
+							label={ __( 'Select color type' ) }
+							hideLabelFromVision
+							isBlock
 						>
-							{ __( 'Gradient' ) }
-						</Button>
-					</ButtonGroup>
-				) }
-				{ ( currentTab === 'color' || ! canChooseAGradient ) && (
-					<ColorPalette
-						value={ colorValue }
-						onChange={
-							canChooseAGradient
-								? ( newColor ) => {
-										onColorChange( newColor );
-										onGradientChange();
-								  }
-								: onColorChange
-						}
-						{ ...{ colors, disableCustomColors } }
-						clearable={ clearable }
-					/>
-				) }
-				{ ( currentTab === 'gradient' || ! canChooseAColor ) && (
-					<GradientPicker
-						value={ gradientValue }
-						onChange={
-							canChooseAColor
-								? ( newGradient ) => {
-										onGradientChange( newGradient );
-										onColorChange();
-								  }
-								: onGradientChange
-						}
-						{ ...{ gradients, disableCustomGradients } }
-						clearable={ clearable }
-					/>
-				) }
+							<ToggleGroupControlOption
+								value="color"
+								label={ __( 'Solid' ) }
+							/>
+							<ToggleGroupControlOption
+								value="gradient"
+								label={ __( 'Gradient' ) }
+							/>
+						</ToggleGroupControl>
+					) }
+					{ ( currentTab === 'color' || ! canChooseAGradient ) && (
+						<ColorPalette
+							value={ colorValue }
+							onChange={
+								canChooseAGradient
+									? ( newColor ) => {
+											onColorChange( newColor );
+											onGradientChange();
+									  }
+									: onColorChange
+							}
+							{ ...{ colors, disableCustomColors } }
+							clearable={ clearable }
+						/>
+					) }
+					{ ( currentTab === 'gradient' || ! canChooseAColor ) && (
+						<GradientPicker
+							value={ gradientValue }
+							onChange={
+								canChooseAColor
+									? ( newGradient ) => {
+											onGradientChange( newGradient );
+											onColorChange();
+									  }
+									: onGradientChange
+							}
+							{ ...{ gradients, disableCustomGradients } }
+							clearable={ clearable }
+						/>
+					) }
+				</VStack>
 			</fieldset>
 		</BaseControl>
 	);
diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index 861710065f7612..c3070aa53106b2 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -2,11 +2,6 @@
 	.block-editor-color-gradient-control__color-indicator {
 		margin-bottom: $grid-unit-15;
 	}
-
-	.block-editor-color-gradient-control__button-tabs {
-		display: block;
-		margin-bottom: $grid-unit-15;
-	}
 }
 
 .block-editor-panel-color-gradient-settings {
@@ -45,4 +40,12 @@
 			margin-right: 0;
 		}
 	}
+
+
+	// This shouldn't be needed but there's a rule in the inspector controls
+	// overriding this causing too much spacing.
+	// That generic rule should ideally be removed.
+	.block-editor-block-inspector & .components-base-control {
+		margin-bottom: inherit;
+	}
 }
diff --git a/packages/block-editor/src/components/colors-gradients/test/control.js b/packages/block-editor/src/components/colors-gradients/test/control.js
index 5d1eec205b326b..e0de5f5eea1ed7 100644
--- a/packages/block-editor/src/components/colors-gradients/test/control.js
+++ b/packages/block-editor/src/components/colors-gradients/test/control.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { render, screen } from '@testing-library/react';
 import { create, act } from 'react-test-renderer';
 import { noop } from 'lodash';
 
@@ -27,67 +28,57 @@ const getButtonWithAriaLabelStartPredicate = ( ariaLabelStart ) => (
 	);
 };
 
-const colorTabButtonPredicate = getButtonWithTestPredicate( 'Solid' );
-const gradientTabButtonPredicate = getButtonWithTestPredicate( 'Gradient' );
+const getTabWithTestPredicate = ( text ) => ( element ) => {
+	return (
+		element.type === 'button' &&
+		element.props[ 'aria-label' ] &&
+		element.props[ 'aria-label' ] === text
+	);
+};
+
+const colorTabButtonPredicate = getTabWithTestPredicate( 'Solid' );
+const gradientTabButtonPredicate = getTabWithTestPredicate( 'Gradient' );
 
 describe( 'ColorPaletteControl', () => {
 	it( 'renders tabs if it is possible to select a color and a gradient rendering a color picker at the start', async () => {
-		let wrapper;
-
-		await act( async () => {
-			wrapper = create(
-				<ColorGradientControl
-					label="Test Color Gradient"
-					colorValue="#f00"
-					colors={ [
-						{ color: '#f00', name: 'red' },
-						{ color: '#0f0', name: 'green' },
-					] }
-					gradients={ [
-						{
-							gradient:
-								'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%',
-							name: 'Vivid cyan blue to vivid purple',
-							slug: 'vivid-cyan-blue-to-vivid-purple',
-						},
-						{
-							gradient:
-								'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
-							name: 'Light green cyan to vivid green cyan',
-							slug: 'light-green-cyan-to-vivid-green-cyan',
-						},
-					] }
-					disableCustomColors={ false }
-					disableCustomGradients={ false }
-					onColorChange={ noop }
-					onGradientChange={ noop }
-				/>
-			);
-		} );
+		render(
+			<ColorGradientControl
+				label="Test Color Gradient"
+				colorValue="#f00"
+				colors={ [
+					{ color: '#f00', name: 'red' },
+					{ color: '#0f0', name: 'green' },
+				] }
+				gradients={ [
+					{
+						gradient:
+							'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%',
+						name: 'Vivid cyan blue to vivid purple',
+						slug: 'vivid-cyan-blue-to-vivid-purple',
+					},
+					{
+						gradient:
+							'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
+						name: 'Light green cyan to vivid green cyan',
+						slug: 'light-green-cyan-to-vivid-green-cyan',
+					},
+				] }
+				disableCustomColors={ false }
+				disableCustomGradients={ false }
+				onColorChange={ noop }
+				onGradientChange={ noop }
+			/>
+		);
 
 		// Is showing the two tab buttons.
-		expect( wrapper.root.findAll( colorTabButtonPredicate ) ).toHaveLength(
-			1
-		);
-		expect(
-			wrapper.root.findAll( gradientTabButtonPredicate )
-		).toHaveLength( 1 );
+		expect( screen.queryByLabelText( 'Solid' ) ).toBeInTheDocument();
+		expect( screen.queryByLabelText( 'Gradient' ) ).toBeInTheDocument();
 
 		// Is showing the two predefined Colors.
-		expect(
-			wrapper.root.findAll(
-				( element ) =>
-					element.type === 'button' &&
-					element.props &&
-					element.props[ 'aria-label' ] &&
-					element.props[ 'aria-label' ].startsWith( 'Color:' )
-			)
-		).toHaveLength( 2 );
+		expect( screen.getAllByLabelText( /^Color:/ ) ).toHaveLength( 2 );
 
 		// Is showing the custom color picker.
-		expect(
-			wrapper.root.findAll( getButtonWithTestPredicate( 'Custom color' ) )
-		).toHaveLength( 1 );
+		expect( screen.queryByText( 'Custom color' ) ).toBeInTheDocument();
 	} );
 
 	it( 'renders the color picker and does not render tabs if it is only possible to select a color', async () => {