diff --git a/webview-ui/src/components/ui/tooltip.tsx b/webview-ui/src/components/ui/tooltip.tsx
index 7e0573b29386..61349743946c 100644
--- a/webview-ui/src/components/ui/tooltip.tsx
+++ b/webview-ui/src/components/ui/tooltip.tsx
@@ -31,6 +31,7 @@ function TooltipContent({
 				className={cn(
 					"bg-vscode-editorHoverWidget-background outline outline-vscode-editorHoverWidget-border text-vscode-editorHoverWidget-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-sm px-2 py-1 text-xs text-balance",
 					"max-w-[300px] break-words",
+					"shadow-[0_2px_8px_var(--color-vscode-widget-shadow)]",
 					className,
 				)}
 				{...props}>
diff --git a/webview-ui/src/index.css b/webview-ui/src/index.css
index 7448fc1f0fa8..ba7aeb576eea 100644
--- a/webview-ui/src/index.css
+++ b/webview-ui/src/index.css
@@ -131,6 +131,7 @@
 	--color-vscode-inputValidation-infoBorder: var(--vscode-inputValidation-infoBorder);
 
 	--color-vscode-widget-border: var(--vscode-widget-border);
+	--color-vscode-widget-shadow: var(--vscode-widget-shadow);
 
 	--color-vscode-textLink-foreground: var(--vscode-textLink-foreground);