diff --git a/packages/block-editor/src/components/grid-visualizer/grid-visualizer.js b/packages/block-editor/src/components/grid-visualizer/grid-visualizer.js
index 3d952c4b723d82..cff5efc5218e10 100644
--- a/packages/block-editor/src/components/grid-visualizer/grid-visualizer.js
+++ b/packages/block-editor/src/components/grid-visualizer/grid-visualizer.js
@@ -64,7 +64,13 @@ const GridVisualizerGrid = forwardRef( ( { blockElement }, ref ) => {
 			style={ gridInfo.style }
 		>
 			{ Array.from( { length: gridInfo.numItems }, ( _, i ) => (
-				<div key={ i } className="block-editor-grid-visualizer__item" />
+				<div
+					key={ i }
+					className="block-editor-grid-visualizer__item"
+					style={ {
+						boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${ gridInfo.currentColor } 20%, #0000)`,
+					} }
+				/>
 			) ) }
 		</div>
 	);
@@ -84,6 +90,7 @@ function getGridInfo( blockElement ) {
 	const numItems = numColumns * numRows;
 	return {
 		numItems,
+		currentColor: getComputedCSS( blockElement, 'color' ),
 		style: {
 			gridTemplateColumns,
 			gridTemplateRows,
diff --git a/packages/block-editor/src/components/grid-visualizer/style.scss b/packages/block-editor/src/components/grid-visualizer/style.scss
index 45140e59c7af94..2adaf18f52470a 100644
--- a/packages/block-editor/src/components/grid-visualizer/style.scss
+++ b/packages/block-editor/src/components/grid-visualizer/style.scss
@@ -13,7 +13,8 @@
 }
 
 .block-editor-grid-visualizer__item {
-	border: $border-width dashed $gray-300;
+	outline: 1px solid transparent;
+	border-radius: $radius-block-ui;
 }
 
 .block-editor-grid-item-resizer {