diff --git a/.changeset/hungry-camels-dream.md b/.changeset/hungry-camels-dream.md
new file mode 100644
index 00000000000..a4f3ea3966b
--- /dev/null
+++ b/.changeset/hungry-camels-dream.md
@@ -0,0 +1,5 @@
+---
+"@chakra-ui/styled-system": patch
+---
+
+Fixed a bug where `hueRotate` and `backdropHueRotate` were not working.
diff --git a/packages/core/styled-system/src/config/filter.ts b/packages/core/styled-system/src/config/filter.ts
index 093dbcf785a..766ca8989f8 100644
--- a/packages/core/styled-system/src/config/filter.ts
+++ b/packages/core/styled-system/src/config/filter.ts
@@ -7,7 +7,7 @@ export const filter: Config = {
   blur: t.blur("--chakra-blur"),
   brightness: t.propT("--chakra-brightness", transforms.brightness),
   contrast: t.propT("--chakra-contrast", transforms.contrast),
-  hueRotate: t.degreeT("--chakra-hue-rotate"),
+  hueRotate: t.propT("--chakra-hue-rotate", transforms.hueRotate),
   invert: t.propT("--chakra-invert", transforms.invert),
   saturate: t.propT("--chakra-saturate", transforms.saturate),
   dropShadow: t.propT("--chakra-drop-shadow", transforms.dropShadow),
@@ -18,7 +18,10 @@ export const filter: Config = {
     transforms.brightness,
   ),
   backdropContrast: t.propT("--chakra-backdrop-contrast", transforms.contrast),
-  backdropHueRotate: t.degreeT("--chakra-backdrop-hue-rotate"),
+  backdropHueRotate: t.propT(
+    "--chakra-backdrop-hue-rotate",
+    transforms.hueRotate,
+  ),
   backdropInvert: t.propT("--chakra-backdrop-invert", transforms.invert),
   backdropSaturate: t.propT("--chakra-backdrop-saturate", transforms.saturate),
 }
diff --git a/packages/core/styled-system/src/utils/transform-functions.ts b/packages/core/styled-system/src/utils/transform-functions.ts
index 0bd6345cd7f..bbeb1097be1 100644
--- a/packages/core/styled-system/src/utils/transform-functions.ts
+++ b/packages/core/styled-system/src/utils/transform-functions.ts
@@ -67,7 +67,8 @@ export const transformFunctions = {
   contrast: wrap("contrast"),
   dropShadow: wrap("drop-shadow"),
   grayscale: wrap("grayscale"),
-  hueRotate: wrap("hue-rotate"),
+  hueRotate: (value: any) =>
+    wrap("hue-rotate")(transformFunctions.degree(value)),
   invert: wrap("invert"),
   saturate: wrap("saturate"),
   sepia: wrap("sepia"),
diff --git a/packages/core/styled-system/tests/css.test.ts b/packages/core/styled-system/tests/css.test.ts
index 1667843bbf9..63e04d407a5 100644
--- a/packages/core/styled-system/tests/css.test.ts
+++ b/packages/core/styled-system/tests/css.test.ts
@@ -677,3 +677,47 @@ test("should resolve !important syntax", () => {
 //     `)
 //   })
 // })
+
+test("returns filter hueRotate css function", () => {
+  const result = css({
+    filter: "auto",
+    hueRotate: "90",
+  })(theme)
+
+  expect(result).toMatchInlineSnapshot(`
+    {
+      "--chakra-blur": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-brightness": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-contrast": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-drop-shadow": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-grayscale": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-hue-rotate": "hue-rotate(90deg)",
+      "--chakra-invert": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-saturate": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-sepia": "var(--chakra-empty,/*!*/ /*!*/)",
+      "filter": "var(--chakra-blur) var(--chakra-brightness) var(--chakra-contrast) var(--chakra-grayscale) var(--chakra-hue-rotate) var(--chakra-invert) var(--chakra-saturate) var(--chakra-sepia) var(--chakra-drop-shadow)",
+    }
+  `)
+})
+
+test("returns backdropFilter backdropHueRotate css function", () => {
+  const result = css({
+    backdropFilter: "auto",
+    backdropHueRotate: "90",
+  })(theme)
+
+  expect(result).toMatchInlineSnapshot(`
+    {
+      "--chakra-backdrop-blur": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-backdrop-brightness": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-backdrop-contrast": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-backdrop-grayscale": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-backdrop-hue-rotate": "hue-rotate(90deg)",
+      "--chakra-backdrop-invert": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-backdrop-opacity": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-backdrop-saturate": "var(--chakra-empty,/*!*/ /*!*/)",
+      "--chakra-backdrop-sepia": "var(--chakra-empty,/*!*/ /*!*/)",
+      "backdropFilter": "var(--chakra-backdrop-blur) var(--chakra-backdrop-brightness) var(--chakra-backdrop-contrast) var(--chakra-backdrop-grayscale) var(--chakra-backdrop-hue-rotate) var(--chakra-backdrop-invert) var(--chakra-backdrop-opacity) var(--chakra-backdrop-saturate) var(--chakra-backdrop-sepia)",
+    }
+  `)
+})