diff --git a/config/webpack-theme-json-plugin.js b/config/webpack-theme-json-plugin.js
index 56ddcee6..11f0dc72 100644
--- a/config/webpack-theme-json-plugin.js
+++ b/config/webpack-theme-json-plugin.js
@@ -91,11 +91,27 @@ class WebpackThemeJsonPlugin {
 				for (const color of value) {
 					const colorVar = getVariableName('settings-color-' + color.slug)
 					result += `${colorVar}: ${color.color};\n`
-					palette.push(`${color.slug}: ${colorVar}`)
+					palette.push(`${formatMapKey(color.slug)}: ${colorVar}`)
 				}
 
 				return result + `$settings-palette: (\n\t${palette.join(',\n\t')}\n);\n`
 			},
+			'settings-color-gradients'(key, value) {
+				let result = ''
+				const gradients = []
+
+				for (const gradient of value) {
+					const gradientVar = getVariableName('settings-gradient-' + gradient.slug)
+					result += `${gradientVar}: ${gradient.gradient};\n`
+					gradients.push(`${formatMapKey(gradient.slug)}: ${gradientVar}`)
+				}
+
+				if (gradients.length === 0) {
+					return result + '$settings-gradients: ();\n'
+				}
+
+				return result + `$settings-gradients: (\n\t${gradients.join(',\n\t')}\n);\n`
+			},
 			'settings-custom': 'default',
 			'settings-spacing-spacingSizes'(key, value) {
 				let result = ''
@@ -125,6 +141,11 @@ class WebpackThemeJsonPlugin {
 			return `$${id.replace(/([A-Z])/g, '-$1').toLowerCase()}`
 		}
 
+		// Quote map keys so slugs like black/white are strings, not Sass color literals.
+		function formatMapKey(slug) {
+			return JSON.stringify(String(slug))
+		}
+
 		// traverse the theme.json file and generate the scss variables
 		function traverse(obj, parents = [], result = '') {
 			for (const key in obj) {
diff --git a/src/scss/04-utilities/_palette.scss b/src/scss/04-utilities/_palette.scss
index 8028324c..75832896 100644
--- a/src/scss/04-utilities/_palette.scss
+++ b/src/scss/04-utilities/_palette.scss
@@ -3,8 +3,8 @@
 /*
  * Palette : Usefully to get the color or background color of a parent element
  * Usage Example:
- * Use these classes to store a color value in a CSS variable.
- * This allows any child element to reuse the parent's background color.
+ * Use these classes to store a color / gradient value in a CSS variable.
+ * This allows any child element to reuse the parent's background color or image.
  *
  * HTML:
  * <div class="has-primary-background-color">
@@ -17,6 +17,8 @@
  * .child-element {
  *    color: var(--background-color);
  * }
+ *
+ * Gradients expose --gradient on .has-{slug}-gradient-background.
  */
 
 @each $color-name, $color-value in $settings-palette {
@@ -28,3 +30,9 @@
 		--background-color: #{$color-value};
 	}
 }
+
+@each $gradient-name, $gradient-value in $settings-gradients {
+	.has-#{$gradient-name}-gradient-background {
+		--gradient: #{$gradient-value};
+	}
+}