diff --git a/.changeset/forty-guests-enjoy.md b/.changeset/forty-guests-enjoy.md
new file mode 100644
index 00000000..f7a4e556
--- /dev/null
+++ b/.changeset/forty-guests-enjoy.md
@@ -0,0 +1,6 @@
+---
+'@chromatic-com/playwright': patch
+'@chromatic-com/cypress': patch
+---
+
+expose `cropToViewport` Chromatic config option
diff --git a/packages/cypress/src/support.ts b/packages/cypress/src/support.ts
index 8df91477..b9b844f8 100644
--- a/packages/cypress/src/support.ts
+++ b/packages/cypress/src/support.ts
@@ -49,6 +49,9 @@ afterEach(() => {
               ...(Cypress.env('prefersReducedMotion') && {
                 prefersReducedMotion: Cypress.env('prefersReducedMotion'),
               }),
+              ...(Cypress.env('cropToViewport') && {
+                cropToViewport: Cypress.env('cropToViewport'),
+              }),
             },
             pageUrl: url,
             viewport: {
diff --git a/packages/cypress/tests/cypress/e2e/options.cy.ts b/packages/cypress/tests/cypress/e2e/options.cy.ts
index f6cf923e..8aed4652 100644
--- a/packages/cypress/tests/cypress/e2e/options.cy.ts
+++ b/packages/cypress/tests/cypress/e2e/options.cy.ts
@@ -17,3 +17,11 @@ it('force high-contrast', { env: { forcedColors: 'active' } }, () => {
 it('prefers reduced motion', { env: { prefersReducedMotion: 'reduce' } }, () => {
   cy.visit('/options/prefers-reduced-motion');
 });
+
+it('crops to viewport', { env: { cropToViewport: true } }, () => {
+  cy.visit('/options/crop-to-viewport');
+});
+
+it('does not crop to viewport by default', () => {
+  cy.visit('/options/crop-to-viewport');
+});
diff --git a/packages/playwright/src/makeTest.ts b/packages/playwright/src/makeTest.ts
index f36de70a..ac5488ce 100644
--- a/packages/playwright/src/makeTest.ts
+++ b/packages/playwright/src/makeTest.ts
@@ -37,6 +37,7 @@ export const makeTest = (
     prefersReducedMotion: [undefined, { option: true }],
     resourceArchiveTimeout: [DEFAULT_GLOBAL_RESOURCE_ARCHIVE_TIMEOUT_MS, { option: true }],
     assetDomains: [[], { option: true }],
+    cropToViewport: [undefined, { option: true }],
 
     save: [
       async (
@@ -51,6 +52,7 @@ export const makeTest = (
           prefersReducedMotion,
           resourceArchiveTimeout,
           assetDomains,
+          cropToViewport,
         },
         use,
         testInfo
@@ -92,6 +94,7 @@ export const makeTest = (
           ...(forcedColors && { forcedColors }),
           ...(pauseAnimationAtEnd && { pauseAnimationAtEnd }),
           ...(prefersReducedMotion && { prefersReducedMotion }),
+          ...(cropToViewport && { cropToViewport }),
         };
 
         await writeTestResult(
diff --git a/packages/playwright/tests/options.spec.ts b/packages/playwright/tests/options.spec.ts
index 508ae881..c6c30681 100644
--- a/packages/playwright/tests/options.spec.ts
+++ b/packages/playwright/tests/options.spec.ts
@@ -39,3 +39,15 @@ test.describe(() => {
     await page.goto('/options/prefers-reduced-motion');
   });
 });
+
+test.describe(() => {
+  test.use({ cropToViewport: true });
+
+  test('crops to viewport', async ({ page }) => {
+    await page.goto('/options/crop-to-viewport');
+  });
+});
+
+test('does not crop to viewport by default', async ({ page }) => {
+  await page.goto('/options/crop-to-viewport');
+});
diff --git a/packages/shared/src/types.ts b/packages/shared/src/types.ts
index ac24d2de..88d95632 100644
--- a/packages/shared/src/types.ts
+++ b/packages/shared/src/types.ts
@@ -28,6 +28,9 @@ export interface ChromaticConfig {
   // (needed when, for example, CI environment can't access the archives later on)
   // ex: www.some-domain.com
   assetDomains?: string[];
+
+  // Crop snapshots to the viewport size.
+  cropToViewport?: boolean;
 }
 
 export type ChromaticStorybookParameters = Omit<ChromaticConfig, 'disableAutoSnapshot'>;
diff --git a/test-server/fixtures/options/crop-to-viewport.html b/test-server/fixtures/options/crop-to-viewport.html
new file mode 100644
index 00000000..d8adabdc
--- /dev/null
+++ b/test-server/fixtures/options/crop-to-viewport.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+  <head>
+    <link rel="stylesheet" href="/css.urls.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body>
+    <div class="grid grid-flow-row m-10">
+      <div><img src="/img"/></div>
+      <div><img src="/img"/></div>
+      <div><img src="/img"/></div>
+      <div><img src="/img"/></div>
+      <div><img src="/img"/></div>
+      <div><img src="/img"/></div>
+      <div><img src="/img"/></div>
+      <div><img src="/img"/></div>
+      <div><img src="/img"/></div>
+
+      <div><img src="/img/another"/></div>
+      <div><img src="/img/another"/></div>
+      <div><img src="/img/another"/></div>
+      <div><img src="/img/another"/></div>
+    </div>
+  </body>
+</html>
\ No newline at end of file