diff --git a/packages/grafana-ui/src/utils/handleReducedMotion.ts b/packages/grafana-ui/src/utils/handleReducedMotion.ts
new file mode 100644
index 00000000000..1ca85249dbe
--- /dev/null
+++ b/packages/grafana-ui/src/utils/handleReducedMotion.ts
@@ -0,0 +1,16 @@
+import { CSSInterpolation } from '@emotion/css';
+
+/**
+ * @param styles - Styles to apply when no `prefers-reduced-motion` preference is set.
+ * @param reducedMotionStyles - Styles to apply when `prefers-reduced-motion` is enabled.
+ * Applies one of `styles` or `reducedMotionStyles` depending on a users `prefers-reduced-motion` setting. Omitting `reducedMotionStyles` entirely will result in no styles being applied when `prefers-reduced-motion` is enabled. In most cases this is a reasonable default.
+ */
+export const handleReducedMotion = (styles: CSSInterpolation, reducedMotionStyles?: CSSInterpolation) => {
+  const result: Record<string, CSSInterpolation> = {
+    '@media (prefers-reduced-motion: no-preference)': styles,
+  };
+  if (reducedMotionStyles) {
+    result['@media (prefers-reduced-motion: reduce)'] = reducedMotionStyles;
+  }
+  return result;
+};
diff --git a/packages/grafana-ui/src/utils/index.ts b/packages/grafana-ui/src/utils/index.ts
index b4ec365d717..55a1694e8b7 100644
--- a/packages/grafana-ui/src/utils/index.ts
+++ b/packages/grafana-ui/src/utils/index.ts
@@ -19,5 +19,6 @@ export { createLogger } from './logger';
 export { attachDebugger } from './debug';
 export * from './nodeGraph';
 export { fuzzyMatch } from './fuzzy';
+export { handleReducedMotion } from './handleReducedMotion';
 
 export { ReactUtils };