diff --git a/.changeset/fair-buses-drop.md b/.changeset/fair-buses-drop.md
new file mode 100644
index 000000000..425188491
--- /dev/null
+++ b/.changeset/fair-buses-drop.md
@@ -0,0 +1,5 @@
+---
+'@emotion/serialize': patch
+---
+
+Fix incorrectly throwing error on the gradient content values
diff --git a/packages/css/test/__snapshots__/warnings.test.js.snap b/packages/css/test/__snapshots__/warnings.test.js.snap
index fef01cd1b..937a9da85 100644
--- a/packages/css/test/__snapshots__/warnings.test.js.snap
+++ b/packages/css/test/__snapshots__/warnings.test.js.snap
@@ -14,6 +14,11 @@ exports[`does not warn when valid values are passed for the content property 1`]
   content: "some thing";
   content: 'another thing';
   content: url("http://www.example.com/test.png");
+  content: linear-gradient(hotpink, #8be9fd);
+  content: radial-gradient(hotpink, #8be9fd);
+  content: repeating-linear-gradient(hotpink, #8be9fd);
+  content: repeating-radial-gradient(hotpink, #8be9fd);
+  content: conic-gradient(hotpink, #8be9fd);
   content: counter(chapter_counter);
   content: counters(section_counter, ".");
   content: attr(value string);
diff --git a/packages/css/test/warnings.test.js b/packages/css/test/warnings.test.js
index 3994d541e..a7fb83520 100644
--- a/packages/css/test/warnings.test.js
+++ b/packages/css/test/warnings.test.js
@@ -21,6 +21,11 @@ const validValues = [
   '"some thing"',
   "'another thing'",
   'url("http://www.example.com/test.png")',
+  'linear-gradient(hotpink, #8be9fd)',
+  'radial-gradient(hotpink, #8be9fd)',
+  'repeating-linear-gradient(hotpink, #8be9fd)',
+  'repeating-radial-gradient(hotpink, #8be9fd)',
+  'conic-gradient(hotpink, #8be9fd)',
   'counter(chapter_counter)',
   'counters(section_counter, ".")',
   'attr(value string)'
diff --git a/packages/react/__tests__/__snapshots__/warnings.js.snap b/packages/react/__tests__/__snapshots__/warnings.js.snap
index 092d0b330..64d4331f8 100644
--- a/packages/react/__tests__/__snapshots__/warnings.js.snap
+++ b/packages/react/__tests__/__snapshots__/warnings.js.snap
@@ -14,6 +14,11 @@ exports[`does not warn when valid values are passed for the content property 1`]
   content: "some thing";
   content: 'another thing';
   content: url("http://www.example.com/test.png");
+  content: linear-gradient(hotpink, #8be9fd);
+  content: radial-gradient(hotpink, #8be9fd);
+  content: repeating-linear-gradient(hotpink, #8be9fd);
+  content: repeating-radial-gradient(hotpink, #8be9fd);
+  content: conic-gradient(hotpink, #8be9fd);
   content: counter(chapter_counter);
   content: counters(section_counter, ".");
   content: attr(value string);
diff --git a/packages/react/__tests__/warnings.js b/packages/react/__tests__/warnings.js
index b564f03b4..b9d42ea05 100644
--- a/packages/react/__tests__/warnings.js
+++ b/packages/react/__tests__/warnings.js
@@ -21,6 +21,11 @@ const validValues = [
   '"some thing"',
   "'another thing'",
   'url("http://www.example.com/test.png")',
+  'linear-gradient(hotpink, #8be9fd)',
+  'radial-gradient(hotpink, #8be9fd)',
+  'repeating-linear-gradient(hotpink, #8be9fd)',
+  'repeating-radial-gradient(hotpink, #8be9fd)',
+  'conic-gradient(hotpink, #8be9fd)',
   'counter(chapter_counter)',
   'counters(section_counter, ".")',
   'attr(value string)'
diff --git a/packages/serialize/src/index.js b/packages/serialize/src/index.js
index 152205b52..13334e081 100644
--- a/packages/serialize/src/index.js
+++ b/packages/serialize/src/index.js
@@ -61,7 +61,7 @@ let processStyleValue = (
 }
 
 if (process.env.NODE_ENV !== 'production') {
-  let contentValuePattern = /(attr|calc|counters?|url)\(/
+  let contentValuePattern = /(attr|calc|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(/
   let contentValues = [
     'normal',
     'none',