diff --git a/.changeset/angry-rules-tease.md b/.changeset/angry-rules-tease.md
new file mode 100644
index 000000000..6d2c4755b
--- /dev/null
+++ b/.changeset/angry-rules-tease.md
@@ -0,0 +1,5 @@
+---
+"@vanilla-extract/babel-plugin-debug-ids": minor
+---
+
+Add support for `createVar` calls that declare `@property` rules
diff --git a/.changeset/modern-cobras-sort.md b/.changeset/modern-cobras-sort.md
new file mode 100644
index 000000000..54bb0da62
--- /dev/null
+++ b/.changeset/modern-cobras-sort.md
@@ -0,0 +1,30 @@
+---
+"@vanilla-extract/css": minor
+---
+
+`keyframes`: Add support for a `vars` property to steps within `keyframes` declarations
+
+Example usage:
+
+```ts
+import { createVar, keyframes } from '@vanilla-extract/css';
+
+const angle = createVar({
+  syntax: '<angle>',
+  inherits: false,
+  initialValue: '0deg'
+});
+
+export const angleKeyframes = keyframes({
+  '0%': {
+    vars: {
+      [angle]: '0deg'
+    }
+  },
+  '100%': {
+    vars: {
+      [angle]: '360deg'
+    }
+  }
+});
+```
diff --git a/.changeset/poor-mirrors-care.md b/.changeset/poor-mirrors-care.md
new file mode 100644
index 000000000..4565ff30e
--- /dev/null
+++ b/.changeset/poor-mirrors-care.md
@@ -0,0 +1,29 @@
+---
+"@vanilla-extract/css": minor
+---
+
+`createVar`: Add support for defining [`@property`] rules
+
+Example usage:
+
+```ts
+import { createVar } from '@vanilla-extract/css';
+
+export const myVar = createVar({
+  syntax: '<number>',
+  inherits: false,
+  initialValue: '0.5',
+});
+```
+
+This will generate the following CSS:
+
+```css
+@property --myVar__jteyb14 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0.5;
+}
+```
+
+[`@property`]: https://developer.mozilla.org/en-US/docs/Web/CSS/@property
diff --git a/examples/next/components/HelloWorld.css.ts b/examples/next/components/HelloWorld.css.ts
index ec3a899ac..909a23c86 100644
--- a/examples/next/components/HelloWorld.css.ts
+++ b/examples/next/components/HelloWorld.css.ts
@@ -1,11 +1,34 @@
-import { style } from '@vanilla-extract/css';
+import { style, createVar, keyframes, fallbackVar } from '@vanilla-extract/css';
+
+const color = createVar();
+const angle = createVar({
+  syntax: '<angle>',
+  inherits: false,
+  initialValue: '0deg',
+});
+
+const angleKeyframes = keyframes({
+  '100%': {
+    vars: {
+      [angle]: '360deg',
+    },
+  },
+});
 
 export const root = style({
   background: 'pink',
   color: 'blue',
   padding: '16px',
-  transition: 'opacity .1s ease', // Testing autoprefixer
+  transition: `opacity .1s ease, color .1s ease`, // Testing autoprefixer
+  backgroundImage: `linear-gradient(${angle}, rgba(153, 70, 198, 0.35) 0%, rgba(28, 56, 240, 0.46) 100%)`,
+  animation: `${angleKeyframes} 7s infinite ease-in-out both`,
   ':hover': {
     opacity: 0.8,
+    color: color,
+  },
+
+  vars: {
+    [color]: '#fef',
+    [angle]: fallbackVar(angle, '138deg'),
   },
 });
diff --git a/fixtures/themed/src/styles.css.ts b/fixtures/themed/src/styles.css.ts
index a68ffea22..8e15a8806 100644
--- a/fixtures/themed/src/styles.css.ts
+++ b/fixtures/themed/src/styles.css.ts
@@ -64,12 +64,16 @@ globalStyle(`body ${iDunno}:after`, {
   content: "'I am content'",
 });
 
-const blankVar1 = createVar();
+const blankVar1 = createVar({
+  syntax: '<number>',
+  inherits: false,
+  initialValue: '0.5',
+});
 const blankVar2 = createVar();
 
 export const opacity = styleVariants(
   {
-    '1/2': fallbackVar(blankVar1, '0.5'),
+    '1/2': blankVar1,
     '1/4': fallbackVar(blankVar1, blankVar2, '0.25'),
   },
   (value) => ({
diff --git a/packages/babel-plugin-debug-ids/src/index.test.ts b/packages/babel-plugin-debug-ids/src/index.test.ts
index 9b9d4e862..0b879b7eb 100644
--- a/packages/babel-plugin-debug-ids/src/index.test.ts
+++ b/packages/babel-plugin-debug-ids/src/index.test.ts
@@ -217,6 +217,22 @@ describe('babel plugin', () => {
     `);
   });
 
+  it('should handle typed createVar assigned to const', () => {
+    const source = `
+      import { createVar } from '@vanilla-extract/css';
+
+      const myVar = createVar({ syntax: '*', inherits: true });
+    `;
+
+    expect(transform(source)).toMatchInlineSnapshot(`
+      import { createVar } from '@vanilla-extract/css';
+      const myVar = createVar({
+        syntax: '*',
+        inherits: true
+      }, "myVar");
+    `);
+  });
+
   it('should handle createContainer assigned to const', () => {
     const source = `
       import { createContainer } from '@vanilla-extract/css';
diff --git a/packages/babel-plugin-debug-ids/src/index.ts b/packages/babel-plugin-debug-ids/src/index.ts
index 2b0ef6d2f..f5e826aef 100644
--- a/packages/babel-plugin-debug-ids/src/index.ts
+++ b/packages/babel-plugin-debug-ids/src/index.ts
@@ -31,7 +31,11 @@ const debuggableFunctionConfig = {
     maxParams: 2,
   },
   createVar: {
-    maxParams: 1,
+    maxParams: 2,
+    hasDebugId: ({ arguments: args }) => {
+      const previousArg = args[args.length - 1];
+      return t.isStringLiteral(previousArg) || t.isTemplateLiteral(previousArg);
+    },
   },
   recipe: {
     maxParams: 2,
diff --git a/packages/css/src/transformCss.test.ts b/packages/css/src/transformCss.test.ts
index 5debcbc1d..167152766 100644
--- a/packages/css/src/transformCss.test.ts
+++ b/packages/css/src/transformCss.test.ts
@@ -6,6 +6,14 @@ import { style } from './style';
 setFileScope('test');
 
 const testVar = createVar();
+const testPropertyVar = createVar(
+  {
+    syntax: '<angle>',
+    inherits: false,
+    initialValue: '0deg',
+  },
+  'test-property',
+);
 const style1 = style({});
 const style2 = style({});
 
@@ -1845,6 +1853,46 @@ describe('transformCss', () => {
     `);
   });
 
+  it('should handle animations with vars', () => {
+    expect(
+      transformCss({
+        composedClassLists: [],
+        localClassNames: ['testClass'],
+        cssObjs: [
+          {
+            type: 'keyframes',
+            name: 'myAnimation',
+            rule: {
+              from: {
+                vars: {
+                  '--my-var': 'red',
+                  [testVar]: 'green',
+                },
+              },
+              to: {
+                vars: {
+                  '--my-var': 'orange',
+                  [testVar]: 'blue',
+                },
+              },
+            },
+          },
+        ],
+      }).join('\n'),
+    ).toMatchInlineSnapshot(`
+      @keyframes myAnimation {
+        from {
+          --my-var: red;
+          --skkcyc0: green;
+        }
+        to {
+          --my-var: orange;
+          --skkcyc0: blue;
+        }
+      }
+    `);
+  });
+
   it('should handle font face', () => {
     expect(
       transformCss({
@@ -2022,7 +2070,7 @@ describe('transformCss', () => {
     `);
   });
 
-  it('should handle css vars', () => {
+  it('should handle simple css properties', () => {
     expect(
       transformCss({
         composedClassLists: [],
@@ -2076,6 +2124,60 @@ describe('transformCss', () => {
     `);
   });
 
+  it('should handle complicated css properties', () => {
+    expect(
+      transformCss({
+        composedClassLists: [],
+        localClassNames: ['testClass'],
+        cssObjs: [
+          {
+            type: 'local',
+            selector: 'testClass',
+            rule: {
+              display: 'block',
+              vars: {
+                '--my-var': 'red',
+                [testPropertyVar]: '10deg',
+              },
+              selectors: {
+                '&:nth-child(3)': {
+                  vars: {
+                    '--my-var': 'orange',
+                    [testPropertyVar]: '20deg',
+                  },
+                },
+              },
+              '@media': {
+                'screen and (min-width: 700px)': {
+                  vars: {
+                    '--my-var': 'yellow',
+                    [testPropertyVar]: '50deg',
+                  },
+                },
+              },
+            },
+          },
+        ],
+      }).join('\n'),
+    ).toMatchInlineSnapshot(`
+      .testClass {
+        --my-var: red;
+        --test-property__skkcyc1: 10deg;
+        display: block;
+      }
+      .testClass:nth-child(3) {
+        --my-var: orange;
+        --test-property__skkcyc1: 20deg;
+      }
+      @media screen and (min-width: 700px) {
+        .testClass {
+          --my-var: yellow;
+          --test-property__skkcyc1: 50deg;
+        }
+      }
+    `);
+  });
+
   it('should cast property values to pixels when relevant', () => {
     expect(
       transformCss({
@@ -2288,13 +2390,13 @@ describe('transformCss', () => {
         ],
       }).join('\n'),
     ).toMatchInlineSnapshot(`
-      .skkcyc2 .skkcyc1:before, .skkcyc2 .skkcyc1:after {
+      .skkcyc3 .skkcyc2:before, .skkcyc3 .skkcyc2:after {
         background: black;
       }
-      ._1g1ptzo1._1g1ptzo10 .skkcyc1 {
+      ._1g1ptzo1._1g1ptzo10 .skkcyc2 {
         background: blue;
       }
-      ._1g1ptzo10._1g1ptzo1 .skkcyc1 {
+      ._1g1ptzo10._1g1ptzo1 .skkcyc2 {
         background: blue;
       }
     `);
diff --git a/packages/css/src/transformCss.ts b/packages/css/src/transformCss.ts
index 3750eaa09..daa14e4ef 100644
--- a/packages/css/src/transformCss.ts
+++ b/packages/css/src/transformCss.ts
@@ -13,6 +13,7 @@ import type {
   CSSSelectorBlock,
   Composition,
   WithQueries,
+  CSSPropertyBlock,
 } from './types';
 import { markCompositionUsed } from './adapter';
 import { forEach, omit, mapKeys } from './utils';
@@ -119,6 +120,7 @@ class Stylesheet {
   localClassNamesSearch: AhoCorasick;
   composedClassLists: Array<{ identifier: string; regex: RegExp }>;
   layers: Map<string, Array<string>>;
+  propertyRules: Array<CSSPropertyBlock>;
 
   constructor(
     localClassNames: Array<string>,
@@ -128,6 +130,7 @@ class Stylesheet {
     this.conditionalRulesets = [new ConditionalRuleset()];
     this.fontFaceRules = [];
     this.keyframesRules = [];
+    this.propertyRules = [];
     this.localClassNamesMap = new Map(
       localClassNames.map((localClassName) => [localClassName, localClassName]),
     );
@@ -150,10 +153,17 @@ class Stylesheet {
 
       return;
     }
+
+    if (root.type === 'property') {
+      this.propertyRules.push(root);
+
+      return;
+    }
+
     if (root.type === 'keyframes') {
       root.rule = Object.fromEntries(
         Object.entries(root.rule).map(([keyframe, rule]) => {
-          return [keyframe, this.transformProperties(rule)];
+          return [keyframe, this.transformVars(this.transformProperties(rule))];
         }),
       );
       this.keyframesRules.push(root);
@@ -582,6 +592,11 @@ class Stylesheet {
       css.push(renderCss({ '@font-face': fontFaceRule }));
     }
 
+    // Render property rules
+    for (const property of this.propertyRules) {
+      css.push(renderCss({ [`@property ${property.name}`]: property.rule }));
+    }
+
     // Render keyframes
     for (const keyframe of this.keyframesRules) {
       css.push(renderCss({ [`@keyframes ${keyframe.name}`]: keyframe.rule }));
diff --git a/packages/css/src/types.ts b/packages/css/src/types.ts
index 419e87236..4af194842 100644
--- a/packages/css/src/types.ts
+++ b/packages/css/src/types.ts
@@ -27,7 +27,7 @@ export type CSSProperties = {
 };
 
 export interface CSSKeyframes {
-  [time: string]: CSSProperties;
+  [time: string]: CSSPropertiesWithVars;
 }
 
 export type CSSPropertiesWithVars = CSSProperties & {
@@ -107,12 +107,19 @@ export type CSSLayerDeclaration = {
   name: string;
 };
 
+export type CSSPropertyBlock = {
+  type: 'property';
+  name: string;
+  rule: AtRule.Property;
+};
+
 export type CSS =
   | CSSStyleBlock
   | CSSFontFaceBlock
   | CSSKeyframesBlock
   | CSSSelectorBlock
-  | CSSLayerDeclaration;
+  | CSSLayerDeclaration
+  | CSSPropertyBlock;
 
 export type FileScope = {
   packageName?: string;
@@ -159,3 +166,28 @@ export type ThemeVars<ThemeContract extends NullableTokens> = MapLeafNodes<
 export type ClassNames = string | Array<ClassNames>;
 
 export type ComplexStyleRule = StyleRule | Array<StyleRule | ClassNames>;
+
+type _PropertySyntax =
+  | '<angle>'
+  | '<color>'
+  | '<custom-ident>'
+  | '<image>'
+  | '<integer>'
+  | '<length-percentage>'
+  | '<length>'
+  | '<number>'
+  | '<percentage>'
+  | '<resolution>'
+  | '<string>'
+  | '<time>'
+  | '<transform-function>'
+  | '<transform-list>'
+  | '<url>'
+  | '*';
+
+/** Suggests elements of the provided string union `Suggestions` while still accepting any string */
+type LooseAutocomplete<Suggestions extends string> =
+  | Suggestions
+  | Omit<string, Suggestions>;
+
+export type PropertySyntax = LooseAutocomplete<_PropertySyntax>;
diff --git a/packages/css/src/vars.ts b/packages/css/src/vars.ts
index d645804c1..fcd5e1d53 100644
--- a/packages/css/src/vars.ts
+++ b/packages/css/src/vars.ts
@@ -1,3 +1,5 @@
+import type { AtRule } from 'csstype';
+
 import {
   get,
   walkObject,
@@ -9,20 +11,98 @@ import cssesc from 'cssesc';
 
 import { Tokens, NullableTokens, ThemeVars } from './types';
 import { validateContract } from './validateContract';
+import { getFileScope } from './fileScope';
 import { generateIdentifier } from './identifier';
-
-export function createVar(debugId?: string): CSSVarFunction {
+import { PropertySyntax } from './types';
+import { appendCss } from './adapter';
+
+type VarDeclaration =
+  | {
+      syntax: '*';
+      inherits: boolean;
+      initialValue?: string;
+    }
+  | {
+      syntax: Exclude<PropertySyntax, '*'> | Array<PropertySyntax>;
+      inherits: boolean;
+      initialValue: string;
+    };
+
+const buildPropertyRule = ({
+  syntax,
+  inherits,
+  initialValue,
+}: VarDeclaration): AtRule.Property => ({
+  syntax: `"${Array.isArray(syntax) ? syntax.join(' | ') : syntax}"`,
+  inherits: inherits ? 'true' : 'false',
+  ...(initialValue != null ? { initialValue } : {}),
+});
+
+export function createVar(
+  declaration: VarDeclaration,
+  debugId?: string,
+): CSSVarFunction;
+export function createVar(debugId?: string): CSSVarFunction;
+export function createVar(
+  debugIdOrDeclaration?: string | VarDeclaration,
+  debugId?: string,
+): CSSVarFunction {
   const cssVarName = cssesc(
     generateIdentifier({
-      debugId,
+      debugId:
+        typeof debugIdOrDeclaration === 'string'
+          ? debugIdOrDeclaration
+          : debugId,
       debugFileName: false,
     }),
     { isIdentifier: true },
   );
 
+  if (debugIdOrDeclaration && typeof debugIdOrDeclaration === 'object') {
+    appendCss(
+      {
+        type: 'property',
+        name: `--${cssVarName}`,
+        rule: buildPropertyRule(debugIdOrDeclaration),
+      },
+      getFileScope(),
+    );
+  }
+
   return `var(--${cssVarName})` as const;
 }
 
+export function createGlobalVar(name: string): CSSVarFunction;
+export function createGlobalVar(
+  name: string,
+  declaration: VarDeclaration,
+): CSSVarFunction;
+export function createGlobalVar(
+  name: string,
+  declaration?: VarDeclaration,
+): CSSVarFunction {
+  if (declaration && typeof declaration === 'object') {
+    appendCss(
+      {
+        type: 'property',
+        name: `--${name}`,
+        rule: buildPropertyRule(declaration),
+      },
+      getFileScope(),
+    );
+  }
+
+  return `var(--${name})`;
+}
+
+export function assertVarName(
+  value: unknown,
+): asserts value is `var(--${string})` {
+  if (typeof value !== 'string' || !/^var\(--.*\)$/.test(value)) {
+    throw new Error(`Invalid variable name: ${value}`);
+  }
+}
+
 export function fallbackVar(
   ...values: [string, ...Array<string>]
 ): CSSVarFunction {
@@ -32,9 +112,7 @@ export function fallbackVar(
     if (finalValue === '') {
       finalValue = String(value);
     } else {
-      if (typeof value !== 'string' || !/^var\(--.*\)$/.test(value)) {
-        throw new Error(`Invalid variable name: ${value}`);
-      }
+      assertVarName(value);
 
       finalValue = value.replace(/\)$/, `, ${finalValue})`);
     }
diff --git a/packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap b/packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap
index ffe7cb1b4..cc909c6d6 100644
--- a/packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap
+++ b/packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap
@@ -15,7 +15,7 @@ body, button {
 }",
   ],
   [
-    "assets/src/styles.css.ts.vanilla-C7NI1Ovc.css",
+    "assets/src/styles.css.ts.vanilla-BfisGtko.css",
     "@font-face {
   src: local("Impact");
   font-family: "styles_impact__jteyb10";
@@ -24,6 +24,11 @@ body, button {
   src: local("Comic Sans MS");
   font-family: MyGlobalComicSans;
 }
+@property --blankVar1__jteyb14 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0.5;
+}
 .styles_container__jteyb11 {
   display: flex;
   flex-direction: column;
@@ -48,7 +53,7 @@ body .styles_iDunno__jteyb12:after {
   content: 'I am content';
 }
 html .styles_opacity_1\\/2__jteyb16 {
-  opacity: var(--blankVar1__jteyb14, 0.5);
+  opacity: var(--blankVar1__jteyb14);
 }
 html .styles_opacity_1\\/4__jteyb17 {
   opacity: var(--blankVar1__jteyb14, var(--blankVar2__jteyb15, 0.25));
@@ -214,7 +219,7 @@ export { shadow };
     "src/styles.css.js",
     "import './../assets/src/shared.css.ts.vanilla-G_Gyt4-e.css';
 import './../assets/src/themes.css.ts.vanilla-s9rcEmBH.css';
-import './../assets/src/styles.css.ts.vanilla-C7NI1Ovc.css';
+import './../assets/src/styles.css.ts.vanilla-BfisGtko.css';
 
 var button = "styles_button__jteyb13 shared_shadow__4dtfen0 styles_iDunno__jteyb12";
 var container = "styles_container__jteyb11";
@@ -402,6 +407,11 @@ export { button, container, opacity };
   src: local("Comic Sans MS");
   font-family: MyGlobalComicSans;
 }
+@property --blankVar1__jteyb14 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0.5;
+}
 .styles_container__jteyb11 {
   display: flex;
   flex-direction: column;
@@ -426,7 +436,7 @@ body .styles_iDunno__jteyb12:after {
   content: 'I am content';
 }
 html .styles_opacity_1\\/2__jteyb16 {
-  opacity: var(--blankVar1__jteyb14, 0.5);
+  opacity: var(--blankVar1__jteyb14);
 }
 html .styles_opacity_1\\/4__jteyb17 {
   opacity: var(--blankVar1__jteyb14, var(--blankVar2__jteyb15, 0.25));
@@ -551,7 +561,7 @@ exports[`rollup-plugin should build with sourcemaps 1`] = `
     "",
   ],
   [
-    "assets/src/styles.css.ts.vanilla-C7NI1Ovc.css",
+    "assets/src/styles.css.ts.vanilla-BfisGtko.css",
     "",
   ],
   [
@@ -616,7 +626,7 @@ body, button {
 }",
   ],
   [
-    "assets/src/styles.css.ts.vanilla-C7NI1Ovc.css",
+    "assets/src/styles.css.ts.vanilla-BfisGtko.css",
     "@font-face {
   src: local("Impact");
   font-family: "styles_impact__jteyb10";
@@ -625,6 +635,11 @@ body, button {
   src: local("Comic Sans MS");
   font-family: MyGlobalComicSans;
 }
+@property --blankVar1__jteyb14 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0.5;
+}
 .styles_container__jteyb11 {
   display: flex;
   flex-direction: column;
@@ -649,7 +664,7 @@ body .styles_iDunno__jteyb12:after {
   content: 'I am content';
 }
 html .styles_opacity_1\\/2__jteyb16 {
-  opacity: var(--blankVar1__jteyb14, 0.5);
+  opacity: var(--blankVar1__jteyb14);
 }
 html .styles_opacity_1\\/4__jteyb17 {
   opacity: var(--blankVar1__jteyb14, var(--blankVar2__jteyb15, 0.25));
@@ -723,7 +738,7 @@ html .styles_opacity_1\\/4__jteyb17 {
     "import { assignInlineVars, setElementVars } from '@vanilla-extract/dynamic';
 import './assets/src/themes.css.ts.vanilla-s9rcEmBH.css';
 import './assets/src/shared.css.ts.vanilla-G_Gyt4-e.css';
-import './assets/src/styles.css.ts.vanilla-C7NI1Ovc.css';
+import './assets/src/styles.css.ts.vanilla-BfisGtko.css';
 
 var altTheme = "themes_altTheme__cvta176";
 var responsiveTheme = "themes_responsiveTheme__cvta17e";
diff --git a/site/contents.js b/site/contents.js
index 61f8449a2..58e7bd161 100644
--- a/site/contents.js
+++ b/site/contents.js
@@ -37,6 +37,7 @@ const contents = [
       'create-global-theme',
       'create-global-theme-contract',
       'global-font-face',
+      'create-global-var',
       'global-keyframes',
       'global-layer',
     ],
diff --git a/site/docs/api/create-var.md b/site/docs/api/create-var.md
index 89b3328c8..6924a6bc8 100644
--- a/site/docs/api/create-var.md
+++ b/site/docs/api/create-var.md
@@ -112,3 +112,27 @@ export const pink = style({
 ## Assigning variables dynamically
 
 CSS variables can also be assigned dynamically using APIs in [the `@vanilla-extract/dynamic` package](/documentation/packages/dynamic).
+
+## @property rules
+
+[@property] rules can also be created using `createVar`.
+CSS variables with @property rules are used in the same way as regular CSS variables:
+
+```ts compiled
+// accent.css.ts
+import { createVar, style } from '@vanilla-extract/css';
+
+export const accentVar = createVar({
+  syntax: '<color>',
+  inherits: false,
+  initialValue: 'blue'
+});
+
+export const pink = style({
+  vars: {
+    [accentVar]: 'pink'
+  }
+});
+```
+
+[@property]: https://developer.mozilla.org/en-US/docs/Web/CSS/@property
diff --git a/site/docs/api/keyframes.md b/site/docs/api/keyframes.md
index cdcd09613..0c6b1333a 100644
--- a/site/docs/api/keyframes.md
+++ b/site/docs/api/keyframes.md
@@ -27,3 +27,41 @@ export const spinAgain = style({
   animation: `${rotate} 3s`
 });
 ```
+
+## Animating CSS variables
+
+CSS variables can be animated by setting their values within the `vars` property of a keyframe step:
+
+```ts compiled
+// animation.css.ts
+
+import {
+  createVar,
+  fallbackVar,
+  keyframes,
+  style
+} from '@vanilla-extract/css';
+
+const angleKeyframes = keyframes({
+  '0%': {
+    vars: {
+      [angle]: '0deg'
+    }
+  },
+  '100%': {
+    vars: {
+      [angle]: '360deg'
+    }
+  }
+});
+
+export const root = style({
+  backgroundImage: `linear-gradient(${angle}, rgba(153, 70, 198, 0.35) 0%, rgba(28, 56, 240, 0.46) 100%)`,
+  animation: `${angleKeyframes} 7s infinite ease-in-out both`,
+
+  vars: {
+    // This will fallback to 180deg if @property is not supported by the browser
+    [angle]: fallbackVar(angle, '180deg')
+  }
+});
+```
diff --git a/site/docs/global-api/create-global-var.md b/site/docs/global-api/create-global-var.md
new file mode 100644
index 000000000..75327b352
--- /dev/null
+++ b/site/docs/global-api/create-global-var.md
@@ -0,0 +1,47 @@
+---
+title: createGlobalVar
+parent: global-api
+---
+
+# createGlobalVar
+
+Similar to [`createVar`], `createGlobalVar` creates a global CSS variable reference:
+
+```ts compiled
+// vars.css.ts
+
+import {
+  createGlobalVar,
+  style
+} from '@vanilla-extract/css';
+
+const opacityVar = createGlobalVar('opacity');
+
+export const content = style({
+  opacity: opacityVar
+});
+```
+
+[@property] rules can also be created using `createGlobalVar`:
+
+```ts compiled
+// vars.css.ts
+
+import {
+  createGlobalVar,
+  style
+} from '@vanilla-extract/css';
+
+const opacityVar = createGlobalVar('opacity', {
+  syntax: '<number>',
+  inherits: false,
+  initialValue: '0.5'
+});
+
+export const content = style({
+  opacity: opacityVar
+});
+```
+
+[`createVar`]: /documentation/api/create-var
+[@property]: https://developer.mozilla.org/en-US/docs/Web/CSS/@property
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--development.css b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--development.css
index 607d29133..5fd7a5c75 100644
--- a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--development.css
+++ b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--development.css
@@ -64,6 +64,11 @@ button {
   src: local("Comic Sans MS");
   font-family: MyGlobalComicSans;
 }
+@property --blankVar1__jteyb14 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0.5;
+}
 .styles_container__jteyb11 {
   display: flex;
   flex-direction: column;
@@ -94,7 +99,7 @@ body .styles_iDunno__jteyb12:after {
   content: "I am content";
 }
 html .styles_opacity_1\/2__jteyb16 {
-  opacity: var(--blankVar1__jteyb14, 0.5);
+  opacity: var(--blankVar1__jteyb14);
 }
 html .styles_opacity_1\/4__jteyb17 {
   opacity: var(--blankVar1__jteyb14, var(--blankVar2__jteyb15, 0.25));
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--production.css b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--production.css
index 8f1355086..1c35b580b 100644
--- a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--production.css
+++ b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--production.css
@@ -64,6 +64,11 @@ button {
   src: local("Comic Sans MS");
   font-family: MyGlobalComicSans;
 }
+@property --jteyb14 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0.5;
+}
 .jteyb11 {
   display: flex;
   flex-direction: column;
@@ -88,7 +93,7 @@ body .jteyb12:after {
   content: "I am content";
 }
 html .jteyb16 {
-  opacity: var(--jteyb14, 0.5);
+  opacity: var(--jteyb14);
 }
 html .jteyb17 {
   opacity: var(--jteyb14, var(--jteyb15, 0.25));
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--development.css b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--development.css
index 607d29133..5fd7a5c75 100644
--- a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--development.css
+++ b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--development.css
@@ -64,6 +64,11 @@ button {
   src: local("Comic Sans MS");
   font-family: MyGlobalComicSans;
 }
+@property --blankVar1__jteyb14 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0.5;
+}
 .styles_container__jteyb11 {
   display: flex;
   flex-direction: column;
@@ -94,7 +99,7 @@ body .styles_iDunno__jteyb12:after {
   content: "I am content";
 }
 html .styles_opacity_1\/2__jteyb16 {
-  opacity: var(--blankVar1__jteyb14, 0.5);
+  opacity: var(--blankVar1__jteyb14);
 }
 html .styles_opacity_1\/4__jteyb17 {
   opacity: var(--blankVar1__jteyb14, var(--blankVar2__jteyb15, 0.25));
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--production.css b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--production.css
index 8f1355086..1c35b580b 100644
--- a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--production.css
+++ b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--production.css
@@ -64,6 +64,11 @@ button {
   src: local("Comic Sans MS");
   font-family: MyGlobalComicSans;
 }
+@property --jteyb14 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0.5;
+}
 .jteyb11 {
   display: flex;
   flex-direction: column;
@@ -88,7 +93,7 @@ body .jteyb12:after {
   content: "I am content";
 }
 html .jteyb16 {
-  opacity: var(--jteyb14, 0.5);
+  opacity: var(--jteyb14);
 }
 html .jteyb17 {
   opacity: var(--jteyb14, var(--jteyb15, 0.25));
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--development.css b/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--development.css
index bc6b6aa04..b24664ab4 100644
--- a/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--development.css
+++ b/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--development.css
@@ -64,6 +64,11 @@ button {
   src: local("Comic Sans MS");
   font-family: MyGlobalComicSans;
 }
+@property --blankVar1__blj6yb4 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0.5;
+}
 .styles_container__blj6yb1 {
   display: flex;
   flex-direction: column;
@@ -94,7 +99,7 @@ body .styles_iDunno__blj6yb2:after {
   content: "I am content";
 }
 html .styles_opacity_1\/2__blj6yb6 {
-  opacity: var(--blankVar1__blj6yb4, 0.5);
+  opacity: var(--blankVar1__blj6yb4);
 }
 html .styles_opacity_1\/4__blj6yb7 {
   opacity: var(--blankVar1__blj6yb4, var(--blankVar2__blj6yb5, 0.25));
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--production.css b/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--production.css
index 6da858d33..3884034ee 100644
--- a/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--production.css
+++ b/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--production.css
@@ -64,6 +64,11 @@ button {
   src: local("Comic Sans MS");
   font-family: MyGlobalComicSans;
 }
+@property --blj6yb4 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0.5;
+}
 .blj6yb1 {
   display: flex;
   flex-direction: column;
@@ -88,7 +93,7 @@ body .blj6yb2:after {
   content: "I am content";
 }
 html .blj6yb6 {
-  opacity: var(--blj6yb4, 0.5);
+  opacity: var(--blj6yb4);
 }
 html .blj6yb7 {
   opacity: var(--blj6yb4, var(--blj6yb5, 0.25));
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-parcel--development.css b/tests/e2e/themed.playwright.ts-snapshots/themed-parcel--development.css
index c874cc998..b66ddfdb8 100644
--- a/tests/e2e/themed.playwright.ts-snapshots/themed-parcel--development.css
+++ b/tests/e2e/themed.playwright.ts-snapshots/themed-parcel--development.css
@@ -112,6 +112,11 @@ button {
   src: local(Comic Sans MS);
   font-family: MyGlobalComicSans;
 }
+@property --blankVar1__blj6yb4 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0.5;
+}
 .styles_container__blj6yb1 {
   gap: var(--space-2__cdwe0v4);
   padding: var(--space-3__cdwe0v5);
@@ -142,7 +147,7 @@ body .styles_iDunno__blj6yb2:after {
   content: "I am content";
 }
 html .styles_opacity_1\/2__blj6yb6 {
-  opacity: var(--blankVar1__blj6yb4, 0.5);
+  opacity: var(--blankVar1__blj6yb4);
 }
 html .styles_opacity_1\/4__blj6yb7 {
   opacity: var(--blankVar1__blj6yb4, var(--blankVar2__blj6yb5, 0.25));
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-parcel--production.css b/tests/e2e/themed.playwright.ts-snapshots/themed-parcel--production.css
index 43eaa4015..0d65edccf 100644
--- a/tests/e2e/themed.playwright.ts-snapshots/themed-parcel--production.css
+++ b/tests/e2e/themed.playwright.ts-snapshots/themed-parcel--production.css
@@ -112,6 +112,11 @@ button {
   src: local(Comic Sans MS);
   font-family: MyGlobalComicSans;
 }
+@property --blj6yb4 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0.5;
+}
 .blj6yb1 {
   gap: var(--cdwe0v4);
   padding: var(--cdwe0v5);
@@ -136,7 +141,7 @@ body .blj6yb2:after {
   content: "I am content";
 }
 html .blj6yb6 {
-  opacity: var(--blj6yb4, 0.5);
+  opacity: var(--blj6yb4);
 }
 html .blj6yb7 {
   opacity: var(--blj6yb4, var(--blj6yb5, 0.25));
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-vite--production.css b/tests/e2e/themed.playwright.ts-snapshots/themed-vite--production.css
index 8f1355086..1c35b580b 100644
--- a/tests/e2e/themed.playwright.ts-snapshots/themed-vite--production.css
+++ b/tests/e2e/themed.playwright.ts-snapshots/themed-vite--production.css
@@ -64,6 +64,11 @@ button {
   src: local("Comic Sans MS");
   font-family: MyGlobalComicSans;
 }
+@property --jteyb14 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0.5;
+}
 .jteyb11 {
   display: flex;
   flex-direction: column;
@@ -88,7 +93,7 @@ body .jteyb12:after {
   content: "I am content";
 }
 html .jteyb16 {
-  opacity: var(--jteyb14, 0.5);
+  opacity: var(--jteyb14);
 }
 html .jteyb17 {
   opacity: var(--jteyb14, var(--jteyb15, 0.25));