diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index c148d053495b62..a118c0b07e726b 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -16,6 +16,7 @@
 -   `Snackbar`: Show the action's focus ring with the design system's outline instead of a legacy dotted outline, and let `Button`/`ExternalLink` own the ring ([#82640](https://github.com/WordPress/gutenberg/pull/82640)).
 -   `CircularOptionPicker`: Updated to show outline via design system's mixin for focus ring instead of previous border implementation ([#82521](https://github.com/WordPress/gutenberg/pull/82521)).
 -   `Autocomplete`: Show focus ring with the design system's outline instead of previous box-shadow implementation ([#82766](https://github.com/WordPress/gutenberg/pull/82766)).
+-   `CustomGradientPicker`: Show the control point's focus ring with the design system's outline and a contrasting backing to separate it from the gradient ([#82834](https://github.com/WordPress/gutenberg/pull/82834)).
 
 ### Bug Fixes
 
diff --git a/packages/components/src/custom-gradient-picker/style.scss b/packages/components/src/custom-gradient-picker/style.scss
index 6df13454e16a55..521c8a5e83cd46 100644
--- a/packages/components/src/custom-gradient-picker/style.scss
+++ b/packages/components/src/custom-gradient-picker/style.scss
@@ -64,17 +64,33 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 		padding: 0;
 
 		// Shadow and stroke.
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white, 0 0 $border-width-focus-fallback 0 rgba($black, 0.25);
+		box-shadow:
+			inset 0 0 0 var(--wp-admin-border-width-focus) $white,
+			0 0 $border-width-focus-fallback 0 rgba($black, 0.25);
 
-		// Windows High Contrast mode will show this outline, but not the box-shadow.
-		outline: 2px solid transparent;
-
-		&:focus,
 		&.is-active {
-			box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) $white, 0 0 $border-width-focus-fallback 0 rgba($black, 0.25);
+			box-shadow:
+				inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) $white,
+				0 0 $border-width-focus-fallback 0 rgba($black, 0.25);
+		}
 
-			// Windows High Contrast mode will show this outline, but not the box-shadow.
-			outline: $border-width-tab solid transparent;
+		&:focus:not(:active) {
+			// Back Button's focus outline with 1px of solid color on both sides.
+			outline-offset: 1px;
+			box-shadow:
+				inset 0 0 0 var(--wp-admin-border-width-focus) $white,
+				0 0 $border-width-focus-fallback 0 rgba($black, 0.25),
+				0 0 0 calc(var(--wpds-border-width-focus) + 2px)
+				var(--wpds-color-background-surface-neutral-strong);
+
+			&.is-active {
+				box-shadow:
+					inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2)
+					$white,
+					0 0 $border-width-focus-fallback 0 rgba($black, 0.25),
+					0 0 0 calc(var(--wpds-border-width-focus) + 2px)
+					var(--wpds-color-background-surface-neutral-strong);
+			}
 		}
 	}
 }