diff --git a/packages/docs/src/stories/styles/table-cell.test.stories.ts b/packages/docs/src/stories/styles/table-cell.test.stories.ts
index 38ecc8f7e3..2a75c88d43 100644
--- a/packages/docs/src/stories/styles/table-cell.test.stories.ts
+++ b/packages/docs/src/stories/styles/table-cell.test.stories.ts
@@ -6,6 +6,7 @@ import {
   storybookTemplate,
   storybookUtilities
 } from '../../../scripts/storybook/helper';
+import { html } from 'lit-html';
 
 const { argTypes, parameters } = storybookDefaults('sd-table-cell');
 const { overrideArgs } = storybookHelpers('sd-table-cell');
@@ -48,4 +49,55 @@ export const Default = {
   }
 };
 
-export const Combination = generateScreenshotStory([Default]);
+/**
+ * This shows the gradient shadow overlay for sd-table-cell--shadow-* when active.
+ * Verifies that --tw-gradient-* variables are properly defined so the shadow gradient
+ * renders correctly in production environments without Tailwind loaded (fixes #2057).
+ */
+export const Shadow = {
+  name: 'Shadow',
+  render: () => {
+    return html`
+      <div class="flex flex-col gap-8">
+        <table class="sd-table">
+          <tbody>
+            <tr>
+              <td class="sd-table-cell sd-table-cell--shadow-right sd-table-cell--shadow-active relative">
+                shadow-right
+              </td>
+              <td class="sd-table-cell">Cell content</td>
+            </tr>
+          </tbody>
+        </table>
+        <table class="sd-table">
+          <tbody>
+            <tr>
+              <td class="sd-table-cell">Cell content</td>
+              <td class="sd-table-cell sd-table-cell--shadow-left sd-table-cell--shadow-active relative">
+                shadow-left
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <table class="sd-table">
+          <tbody>
+            <tr>
+              <td class="sd-table-cell sd-table-cell--shadow-bottom sd-table-cell--shadow-active relative">
+                shadow-bottom
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <table class="sd-table">
+          <tbody>
+            <tr>
+              <td class="sd-table-cell sd-table-cell--shadow-top sd-table-cell--shadow-active relative">shadow-top</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+};
+
+export const Combination = generateScreenshotStory([Default, Shadow]);
diff --git a/packages/styles/src/modules/hidden-links.css b/packages/styles/src/modules/hidden-links.css
index cc76080844..b316724651 100644
--- a/packages/styles/src/modules/hidden-links.css
+++ b/packages/styles/src/modules/hidden-links.css
@@ -21,6 +21,12 @@
   }
   @apply absolute top-6 left-6 panel-color-border border;
   &--multiple {
+    /* Bug fix: shadow variables are undefined in production without Tailwind (#2057) */
+    --tw-shadow: 0 0 #0000;
+    --tw-inset-shadow: 0 0 #0000;
+    --tw-inset-ring-shadow: 0 0 #0000;
+    --tw-ring-offset-shadow: 0 0 #0000;
+    --tw-ring-shadow: 0 0 #0000;
     @apply bg-white shadow flex flex-col px-2 py-4;
     &:before {
       @apply font-bold px-4 py-2;
diff --git a/packages/styles/src/modules/table-cell.css b/packages/styles/src/modules/table-cell.css
index ce9678be85..a7a5f1cf4e 100644
--- a/packages/styles/src/modules/table-cell.css
+++ b/packages/styles/src/modules/table-cell.css
@@ -16,6 +16,13 @@
 }
 
 .sd-table-cell {
+  /* Bug fix: gradient variables are undefined in production without Tailwind (#2057) */
+  --tw-gradient-from: #0000;
+  --tw-gradient-to: #0000;
+  --tw-gradient-from-position: 0%;
+  --tw-gradient-via-position: 50%;
+  --tw-gradient-to-position: 100%;
+
   &--divider {
     @apply border-r-[1px];
   }