diff --git a/tests/page/page-screenshot.spec.ts b/tests/page/page-screenshot.spec.ts
index c43ed57728..da0d3edf96 100644
--- a/tests/page/page-screenshot.spec.ts
+++ b/tests/page/page-screenshot.spec.ts
@@ -884,3 +884,9 @@ it('page screenshot should capture css transform', async function({ page, browse
 
   await expect(page).toHaveScreenshot();
 });
+
+it('should capture css box-shadow', async ({ page }) => {
+  it.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/21620' });
+  await page.setContent(`<div style="box-shadow: red 10px 10px 10px; width: 50px; height: 50px;"></div>`);
+  await expect(page).toHaveScreenshot();
+});
diff --git a/tests/page/page-screenshot.spec.ts-snapshots/should-capture-css-box-shadow-1-chromium.png b/tests/page/page-screenshot.spec.ts-snapshots/should-capture-css-box-shadow-1-chromium.png
new file mode 100644
index 0000000000..089549eb3c
Binary files /dev/null and b/tests/page/page-screenshot.spec.ts-snapshots/should-capture-css-box-shadow-1-chromium.png differ
diff --git a/tests/page/page-screenshot.spec.ts-snapshots/should-capture-css-box-shadow-1-firefox.png b/tests/page/page-screenshot.spec.ts-snapshots/should-capture-css-box-shadow-1-firefox.png
new file mode 100644
index 0000000000..aca4c72688
Binary files /dev/null and b/tests/page/page-screenshot.spec.ts-snapshots/should-capture-css-box-shadow-1-firefox.png differ
diff --git a/tests/page/page-screenshot.spec.ts-snapshots/should-capture-css-box-shadow-1-webkit.png b/tests/page/page-screenshot.spec.ts-snapshots/should-capture-css-box-shadow-1-webkit.png
new file mode 100644
index 0000000000..6a64bc0ee2
Binary files /dev/null and b/tests/page/page-screenshot.spec.ts-snapshots/should-capture-css-box-shadow-1-webkit.png differ