diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss
index d5707380f..bd9791acb 100644
--- a/core/scss/_variables.scss
+++ b/core/scss/_variables.scss
@@ -1827,9 +1827,13 @@ $mockup-browser-sm-url-icon-size: 0.75rem !default;
 $code-block-bg: $pre-bg !default;
 $code-block-color: $pre-color !default;
 $code-block-border-radius: var(--border-radius) !default;
+$code-block-box-shadow:
+  0 0 12px 1px color-transparent(var(--shadow-color), 0.35),
+  0 10px 20px -6px color-transparent(var(--shadow-color), 0.4) !default;
 $code-block-header-bg: rgba(255, 255, 255, 0.05) !default;
 $code-block-header-color: rgba(255, 255, 255, 0.6) !default;
 $code-block-header-border-color: rgba(255, 255, 255, 0.1) !default;
+$code-block-header-box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.5) !default;
 $code-block-header-padding-y: 0.375rem !default;
 $code-block-header-padding-x: 1rem !default;
 $code-block-title-color: $code-block-color !default;
diff --git a/core/scss/ui/_code-block.scss b/core/scss/ui/_code-block.scss
index a42abb6a3..f76a054e6 100644
--- a/core/scss/ui/_code-block.scss
+++ b/core/scss/ui/_code-block.scss
@@ -6,9 +6,11 @@
   --code-block-bg: #{$code-block-bg};
   --code-block-color: #{$code-block-color};
   --code-block-border-radius: #{$code-block-border-radius};
+  --code-block-box-shadow: #{$code-block-box-shadow};
   --code-block-header-bg: #{$code-block-header-bg};
   --code-block-header-color: #{$code-block-header-color};
   --code-block-header-border-color: #{$code-block-header-border-color};
+  --code-block-header-box-shadow: #{$code-block-header-box-shadow};
   --code-block-header-padding-y: #{$code-block-header-padding-y};
   --code-block-header-padding-x: #{$code-block-header-padding-x};
   --code-block-title-color: #{$code-block-title-color};
@@ -31,6 +33,7 @@
   text-align: left;
   direction: ltr;
   background: var(--code-block-bg);
+  box-shadow: var(--code-block-box-shadow);
   @include border-radius(var(--code-block-border-radius));
 
   pre {
@@ -47,6 +50,8 @@
 }
 
 .code-block-header {
+  position: relative;
+  z-index: 1;
   display: flex;
   gap: 0.75rem;
   align-items: center;
@@ -54,6 +59,7 @@
   color: var(--code-block-header-color);
   background: var(--code-block-header-bg);
   border-bottom: var(--border-width) solid var(--code-block-header-border-color);
+  box-shadow: var(--code-block-header-box-shadow);
 }
 
 .code-block-title {