diff --git a/.changeset/bright-zoos-grab.md b/.changeset/bright-zoos-grab.md
new file mode 100644
index 00000000000..030c2558803
--- /dev/null
+++ b/.changeset/bright-zoos-grab.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/progressbar": patch
+---
+
+Reverts the `background-color` property to `background` to support the use of CSS gradients. Gradient support stories were added to the meter and progress bar components within their Chromatic testing previews to ensure that we continue to support gradients by covering them in our visual regression tests.
diff --git a/components/progressbar/index.css b/components/progressbar/index.css
index 9402114323f..d7eb060eb8c 100644
--- a/components/progressbar/index.css
+++ b/components/progressbar/index.css
@@ -117,15 +117,15 @@
 	}
 
 	&.is-positive .spectrum-ProgressBar-fill {
-		background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-positive, var(--spectrum-progressbar-fill-color-positive)));
+		background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-positive, var(--spectrum-progressbar-fill-color-positive)));
 	}
 
 	&.is-notice .spectrum-ProgressBar-fill {
-		background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-notice, var(--spectrum-progressbar-fill-color-notice)));
+		background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-notice, var(--spectrum-progressbar-fill-color-notice)));
 	}
 
 	&.is-negative .spectrum-ProgressBar-fill {
-		background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-negative, var(--spectrum-progressbar-fill-color-negative)));
+		background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-negative, var(--spectrum-progressbar-fill-color-negative)));
 	}
 }
 
@@ -179,14 +179,14 @@
 		block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
 		border-radius: var(--spectrum-progressbar-corner-radius);
 
-		background-color: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color)));
+		background: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color)));
 	}
 
 	.spectrum-ProgressBar-fill {
 		border: none;
 		block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
 		transition: width 1s;
-		background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color)));
+		background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color)));
 	}
 }
 
@@ -226,7 +226,7 @@
 .spectrum-ProgressBar.spectrum-ProgressBar--staticWhite {
 	.spectrum-ProgressBar-fill {
 		color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white));
-		background-color: var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white));
+		background: var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white));
 	}
 
 	.spectrum-ProgressBar-label,
@@ -235,7 +235,7 @@
 	}
 
 	.spectrum-ProgressBar-track {
-		background-color: var(--spectrum-progressbar-track-color-white);
+		background: var(--spectrum-progressbar-track-color-white);
 	}
 }
 
diff --git a/components/progressbar/stories/meter.test.js b/components/progressbar/stories/meter.test.js
index e86c5810277..32808ae31fd 100644
--- a/components/progressbar/stories/meter.test.js
+++ b/components/progressbar/stories/meter.test.js
@@ -1,5 +1,5 @@
 import { Variants } from "@spectrum-css/preview/decorators";
-import { Template } from "./template.js";
+import { Template } from "./meter.template.js";
 
 export const MeterGroup = Variants({
 	Template,
@@ -20,5 +20,13 @@ export const MeterGroup = Variants({
 			testHeading: "Text overflow",
 			label: "Storage space remaining for XYZ user"
 		},
+		/* The gradient story below supports linear-gradients used by Express. For use cases that require a custom 
+		linear-gradient for any --mod-*-{fill} properties, set those custom properties in CSS.
+		*/
+		{
+			testHeading: "Gradient support", 
+			trackFill: "linear-gradient(to right, hotpink, orange)",
+			progressBarFill: "linear-gradient(to left, teal, purple)",
+		}
 	],
 });
diff --git a/components/progressbar/stories/progressbar.stories.js b/components/progressbar/stories/progressbar.stories.js
index 4272149d886..f9f07f74d27 100644
--- a/components/progressbar/stories/progressbar.stories.js
+++ b/components/progressbar/stories/progressbar.stories.js
@@ -57,6 +57,8 @@ export default {
 			control: { type: "range", min: 0, max: 100,},
 			if: { arg: "isIndeterminate", truthy: false },
 		},
+		trackFill: { table: { disable: true }},
+		progressBarFill: { table: { disable: true }},
 		staticColor: {
 			name: "Static color",
 			type: { name: "string" },
diff --git a/components/progressbar/stories/progressbar.test.js b/components/progressbar/stories/progressbar.test.js
index 657777e609d..aad8b120026 100644
--- a/components/progressbar/stories/progressbar.test.js
+++ b/components/progressbar/stories/progressbar.test.js
@@ -15,11 +15,19 @@ export const ProgressBarGroup = Variants({
 			testHeading: "Text overflow",
 			label: "Storage space remaining for XYZ user"
 		},
+		/* The gradient story below supports linear-gradients used by Express. For use cases that require a custom 
+		linear-gradient for any --mod-*-{fill} properties, set those custom properties in CSS.
+		*/
+		{
+			testHeading: "Gradient support",
+			trackFill: "linear-gradient(to right, hotpink, orange)",
+			progressBarFill: "linear-gradient(to left, teal, purple)",
+		},
 	],
 	stateData: [
 		{
 			testHeading: "Indeterminate",
-			indeterminate: true,
+			isIndeterminate: true,
 			value: undefined,
 		}
 	],
diff --git a/components/progressbar/stories/template.js b/components/progressbar/stories/template.js
index dcc615dbea7..a7f36ce4dca 100644
--- a/components/progressbar/stories/template.js
+++ b/components/progressbar/stories/template.js
@@ -16,6 +16,8 @@ export const Template = ({
 	isIndeterminate = false,
 	label,
 	value,
+	trackFill,
+	progressBarFill,
 	customStyles = {},
 	size = "m",
 } = {}, context = {}) => html`
@@ -31,6 +33,8 @@ export const Template = ({
 			style=${styleMap({
 				"width": customWidth,
 				...customStyles,
+				"--mod-progressbar-track-color": trackFill,
+				"--mod-progressbar-fill-color": progressBarFill,
 			})}
 			value=${ifDefined(value ? `${value}%` : undefined)}
 			aria-valuenow=${ifDefined(value ? `${value}%` : undefined)}
@@ -48,8 +52,12 @@ export const Template = ({
 				label: isIndeterminate || typeof value === "undefined" ? "" : `${value}%`,
 				customClasses: [`${rootClass}-percentage`],
 			}, context)}
+
 			<div class="${rootClass}-track">
-				<div class="${rootClass}-fill" style="width: ${value}%;"></div>
+				<div
+					class="${rootClass}-fill"
+					style=${styleMap({ "inline-size": `${value}%` })}
+				></div>
 			</div>
 		</div>
 `;