diff --git a/.changeset/good-wombats-doubt.md b/.changeset/good-wombats-doubt.md
new file mode 100644
index 00000000..10f90832
--- /dev/null
+++ b/.changeset/good-wombats-doubt.md
@@ -0,0 +1,5 @@
+---
+"@vanilla-extract/babel-plugin-debug-ids": minor
+---
+
+Add support for the new `createViewTransition` API
diff --git a/.changeset/purple-cheetahs-hear.md b/.changeset/purple-cheetahs-hear.md
new file mode 100644
index 00000000..28cbeb67
--- /dev/null
+++ b/.changeset/purple-cheetahs-hear.md
@@ -0,0 +1,20 @@
+---
+"@vanilla-extract/css": minor
+---
+
+Add `createViewTransition` API
+
+`createViewTransition` creates a single scoped view transition name for use with CSS View Transitions. This avoids potential naming collisions with other view transitions.
+
+```ts
+import {
+  style,
+  createViewTransition
+} from '@vanilla-extract/css';
+
+export const titleViewTransition = createViewTransition();
+
+export const pageTitle = style({
+  viewTransitionName: titleViewTransition
+});
+``
diff --git a/packages/babel-plugin-debug-ids/src/index.test.ts b/packages/babel-plugin-debug-ids/src/index.test.ts
index 61eb3d87..9b9d4e86 100644
--- a/packages/babel-plugin-debug-ids/src/index.test.ts
+++ b/packages/babel-plugin-debug-ids/src/index.test.ts
@@ -230,6 +230,19 @@ describe('babel plugin', () => {
     `);
   });
 
+  it('should handle createViewTransition assigned to const', () => {
+    const source = `
+      import { createViewTransition } from '@vanilla-extract/css';
+
+      const myViewTransition = createViewTransition();
+    `;
+
+    expect(transform(source)).toMatchInlineSnapshot(`
+      import { createViewTransition } from '@vanilla-extract/css';
+      const myViewTransition = createViewTransition("myViewTransition");
+    `);
+  });
+
   it('should handle fontFace assigned to const', () => {
     const source = `
       import { fontFace } 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 2ba1eca5..2b0ef6d2 100644
--- a/packages/babel-plugin-debug-ids/src/index.ts
+++ b/packages/babel-plugin-debug-ids/src/index.ts
@@ -39,6 +39,9 @@ const debuggableFunctionConfig = {
   createContainer: {
     maxParams: 1,
   },
+  createViewTransition: {
+    maxParams: 1,
+  },
   layer: {
     maxParams: 2,
     hasDebugId: ({ arguments: args }) => {
diff --git a/packages/css/src/index.ts b/packages/css/src/index.ts
index 28937df8..b167e483 100644
--- a/packages/css/src/index.ts
+++ b/packages/css/src/index.ts
@@ -13,4 +13,5 @@ export * from './theme';
 export * from './style';
 export * from './vars';
 export { createContainer } from './container';
+export { createViewTransition } from './viewTransition';
 export * from './layer';
diff --git a/packages/css/src/viewTransition.ts b/packages/css/src/viewTransition.ts
new file mode 100644
index 00000000..654d6982
--- /dev/null
+++ b/packages/css/src/viewTransition.ts
@@ -0,0 +1,6 @@
+import { generateIdentifier } from './identifier';
+
+// createViewTransition is used for locally scoping CSS view transitions
+// For now it is mostly just an alias of generateIdentifier
+export const createViewTransition = (debugId?: string) =>
+  generateIdentifier(debugId);
diff --git a/site/contents.js b/site/contents.js
index 8ff921c5..61f8449a 100644
--- a/site/contents.js
+++ b/site/contents.js
@@ -25,6 +25,7 @@ const contents = [
       'keyframes',
       'create-container',
       'layer',
+      'create-view-transition',
       'add-function-serializer',
     ],
   },
diff --git a/site/docs/api/create-view-transition.md b/site/docs/api/create-view-transition.md
new file mode 100644
index 00000000..a8e58b67
--- /dev/null
+++ b/site/docs/api/create-view-transition.md
@@ -0,0 +1,37 @@
+---
+title: createViewTransition
+parent: api
+---
+
+# createViewTransition
+
+Creates a single scoped view transition name for use with [CSS View Transitions].
+This avoids potential naming collisions with other view transitions.
+
+> 🚧  Ensure your target browsers [support view transitions].
+> Vanilla-extract supports the [view transition syntax][css view transitions] but does not polyfill the feature in unsupported browsers.
+
+```ts compiled
+// itemPage.css.ts
+import {
+  style,
+  createViewTransition
+} from '@vanilla-extract/css';
+
+export const titleViewTransition = createViewTransition();
+
+export const pageTitle = style({
+  viewTransitionName: titleViewTransition
+});
+
+// navigation.css.ts
+import { style } from '@vanilla-extract/css';
+import { titleViewTransition } from './itemPage.css.ts';
+
+export const navigationLinkTitle = style({
+  viewTransitionName: titleViewTransition
+});
+```
+
+[css view transitions]: https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API#css_additions
+[support view transitions]: https://caniuse.com/view-transitions