diff --git a/packages/edit-site/src/components/editor/utils.js b/packages/edit-site/src/components/editor/utils.js
index 305bfda7e245e..ebb6cd27a8e55 100644
--- a/packages/edit-site/src/components/editor/utils.js
+++ b/packages/edit-site/src/components/editor/utils.js
@@ -2,6 +2,7 @@
 export const FONT_SIZE = 'font-size';
 export const LINK_COLOR = '--wp--style--color--link';
 export const BACKGROUND_COLOR = 'background-color';
+export const GRADIENT_COLOR = 'background';
 export const TEXT_COLOR = 'color';
 export const LINE_HEIGHT = 'line-height';
 
@@ -13,6 +14,7 @@ export const STYLE_PROPS = {
 	[ LINE_HEIGHT ]: 'typography.lineHeight',
 	[ TEXT_COLOR ]: 'color.text',
 	[ BACKGROUND_COLOR ]: 'color.background',
+	[ GRADIENT_COLOR ]: 'color.gradient',
 	[ LINK_COLOR ]: 'color.link',
 };
 export const LINK_COLOR_DECLARATION = `a { color: var(${ LINK_COLOR }, #00e); }`;
diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js
index 5062cc4f5b02d..7ce51e063139d 100644
--- a/packages/edit-site/src/components/sidebar/color-panel.js
+++ b/packages/edit-site/src/components/sidebar/color-panel.js
@@ -33,12 +33,15 @@ export default ( {
 		} );
 	}
 
-	// TODO: do gradients
+	// TODO: check for gradient support, etc
 	if ( supports.includes( BACKGROUND_COLOR ) ) {
 		settings.push( {
 			colorValue: getProperty( name, 'color', 'background' ),
 			onColorChange: ( value ) =>
 				setProperty( name, 'color', 'background', value ),
+			gradientValue: getProperty( name, 'color', 'gradient' ),
+			onGradientChange: ( value ) =>
+				setProperty( name, 'color', 'gradient', value ),
 			label: __( 'Background color' ),
 		} );
 	}