diff --git a/.changeset/young-deers-cheat.md b/.changeset/young-deers-cheat.md
new file mode 100644
index 000000000..aabe27ec0
--- /dev/null
+++ b/.changeset/young-deers-cheat.md
@@ -0,0 +1,7 @@
+---
+"@emotion/css": patch
+"@emotion/react": patch
+"@emotion/serialize": patch
+---
+
+Fixed a false positive warning for `content` properties that included `var()`.
diff --git a/packages/css/test/__snapshots__/warnings.test.js.snap b/packages/css/test/__snapshots__/warnings.test.js.snap
index 036eeb043..cb3ceae10 100644
--- a/packages/css/test/__snapshots__/warnings.test.js.snap
+++ b/packages/css/test/__snapshots__/warnings.test.js.snap
@@ -12,6 +12,7 @@ exports[`does not warn when valid values are passed for the content property 1`]
   content: inherit;
   content: "some thing";
   content: 'another thing';
+  content: var(--variable-name);
   content: url("http://www.example.com/test.png");
   content: linear-gradient(hotpink, #8be9fd);
   content: radial-gradient(hotpink, #8be9fd);
diff --git a/packages/css/test/warnings.test.js b/packages/css/test/warnings.test.js
index b8403c2e3..ca2da6a5a 100644
--- a/packages/css/test/warnings.test.js
+++ b/packages/css/test/warnings.test.js
@@ -19,6 +19,7 @@ const validValues = [
   'inherit',
   '"some thing"',
   "'another thing'",
+  'var(--variable-name)',
   'url("http://www.example.com/test.png")',
   'linear-gradient(hotpink, #8be9fd)',
   'radial-gradient(hotpink, #8be9fd)',
diff --git a/packages/react/__tests__/__snapshots__/warnings.js.snap b/packages/react/__tests__/__snapshots__/warnings.js.snap
index 467e6d8aa..0e6ded386 100644
--- a/packages/react/__tests__/__snapshots__/warnings.js.snap
+++ b/packages/react/__tests__/__snapshots__/warnings.js.snap
@@ -12,6 +12,7 @@ exports[`does not warn when valid values are passed for the content property 1`]
   content: inherit;
   content: "some thing";
   content: 'another thing';
+  content: var(--variable-name);
   content: url("http://www.example.com/test.png");
   content: linear-gradient(hotpink, #8be9fd);
   content: radial-gradient(hotpink, #8be9fd);
diff --git a/packages/react/__tests__/warnings.js b/packages/react/__tests__/warnings.js
index 3808f0808..14cb56a17 100644
--- a/packages/react/__tests__/warnings.js
+++ b/packages/react/__tests__/warnings.js
@@ -19,6 +19,7 @@ const validValues = [
   'inherit',
   '"some thing"',
   "'another thing'",
+  'var(--variable-name)',
   'url("http://www.example.com/test.png")',
   'linear-gradient(hotpink, #8be9fd)',
   'radial-gradient(hotpink, #8be9fd)',
diff --git a/packages/serialize/src/index.js b/packages/serialize/src/index.js
index 3b8e3ba2e..08bb1067d 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|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/
+    /(var|attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/
   let contentValues = ['normal', 'none', 'initial', 'inherit', 'unset']
 
   let oldProcessStyleValue = processStyleValue