diff --git a/docs/.vitepress/vitepress/components/navbar/vp-translation.vue b/docs/.vitepress/vitepress/components/navbar/vp-translation.vue
index 86999f0a02..6a0503d025 100644
--- a/docs/.vitepress/vitepress/components/navbar/vp-translation.vue
+++ b/docs/.vitepress/vitepress/components/navbar/vp-translation.vue
@@ -48,7 +48,7 @@ const { switchLang, languageMap, langs, lang, helpTranslate } = useTranslation()
   }
 
   @at-root .translation-popup.el-popper {
-    box-shadow: var(--el-box-shadow-base);
+    box-shadow: var(--el-box-shadow);
 
     .language {
       cursor: pointer;
diff --git a/docs/.vitepress/vitepress/styles/code.scss b/docs/.vitepress/vitepress/styles/code.scss
index fc4a879298..7fdd72726f 100644
--- a/docs/.vitepress/vitepress/styles/code.scss
+++ b/docs/.vitepress/vitepress/styles/code.scss
@@ -166,7 +166,7 @@ div[class*='language-'].line-numbers-mode {
   bottom: 0;
   left: 0;
   z-index: 3;
-  border-right: 1px solid rgba(0, 0, 0, 0.5);
+  border-right: 1px solid var(--el-overlay-color-lighter);
   padding: 1.25rem 0;
   width: 3.5rem;
   text-align: center;
diff --git a/docs/examples/backtop/basic.vue b/docs/examples/backtop/basic.vue
index 59db393a30..544aab37f3 100644
--- a/docs/examples/backtop/basic.vue
+++ b/docs/examples/backtop/basic.vue
@@ -1,4 +1,4 @@
 <template>
   Scroll down to see the bottom-right button.
-  <el-backtop />
+  <el-backtop :right="100" :bottom="100" />
 </template>
diff --git a/docs/examples/backtop/custom.vue b/docs/examples/backtop/custom.vue
index bbd7e7456b..3e78256191 100644
--- a/docs/examples/backtop/custom.vue
+++ b/docs/examples/backtop/custom.vue
@@ -6,7 +6,7 @@
         height: 100%;
         width: 100%;
         background-color: #f2f5f6;
-        box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
+        box-shadow: var(--el-box-shadow-lighter);
         text-align: center;
         line-height: 40px;
         color: #1989fa;
diff --git a/docs/examples/border/shadow.vue b/docs/examples/border/shadow.vue
index 11faedcb69..1f42495d70 100644
--- a/docs/examples/border/shadow.vue
+++ b/docs/examples/border/shadow.vue
@@ -1,15 +1,28 @@
 <template>
-  <div>
-    <template v-for="(shadow, i) in shadowGroup" :key="i">
+  <div class="flex justify-between items-center flex-wrap">
+    <div
+      v-for="(shadow, i) in shadowGroup"
+      :key="i"
+      class="flex flex-col justify-center items-center"
+      m="auto"
+      w="46"
+    >
       <div
-        class="demo-shadow"
-        :style="{ boxShadow: `var(--el-box-shadow-${shadow.type})` }"
+        class="inline-flex"
+        h="30"
+        w="30"
+        m="2"
+        :style="{
+          boxShadow: `var(${getCssVarName(shadow.type)})`,
+        }"
       />
-      <span class="demo-shadow-text"
-        >{{ shadow.name }}
-        <code>box-shadow: {{ getValue(shadow.type) }}</code></span
-      >
-    </template>
+      <span p="y-4" class="demo-shadow-text" text="sm">
+        {{ shadow.name }}
+      </span>
+      <code text="xs">
+        {{ getCssVarName(shadow.type) }}
+      </code>
+    </div>
   </div>
 </template>
 
@@ -19,29 +32,23 @@ import { ref } from 'vue'
 const shadowGroup = ref([
   {
     name: 'Basic Shadow',
-    type: 'base',
+    type: '',
   },
   {
     name: 'Light Shadow',
     type: 'light',
   },
+  {
+    name: 'Lighter Shadow',
+    type: 'lighter',
+  },
+  {
+    name: 'Dark Shadow',
+    type: 'dark',
+  },
 ])
-const getValue = (type: string) => {
-  const getCssVarValue = (prefix, type) =>
-    getComputedStyle(document.documentElement).getPropertyValue(
-      `--el-${prefix}-${type}`
-    )
-  return getCssVarValue('box-shadow', type)
+
+const getCssVarName = (type: string) => {
+  return `--el-box-shadow${type ? '-' : ''}${type}`
 }
 </script>
-<style scoped>
-.demo-shadow {
-  height: 100px;
-  width: 50%;
-}
-.demo-shadow-text {
-  line-height: 50px;
-  color: var(--el-text-color-regular);
-  font-size: 14px;
-}
-</style>
diff --git a/packages/components/backtop/src/backtop.vue b/packages/components/backtop/src/backtop.vue
index b3bed68db3..0c5eae106b 100644
--- a/packages/components/backtop/src/backtop.vue
+++ b/packages/components/backtop/src/backtop.vue
@@ -2,10 +2,7 @@
   <transition :name="`${ns.namespace.value}-fade-in`">
     <div
       v-if="visible"
-      :style="{
-        right: styleRight,
-        bottom: styleBottom,
-      }"
+      :style="backTopStyle"
       :class="ns.b()"
       @click.stop="handleClick"
     >
@@ -39,8 +36,11 @@ const ns = useNamespace('backtop')
 const el = shallowRef<HTMLElement>()
 const container = shallowRef<Document | HTMLElement>()
 const visible = ref(false)
-const styleBottom = computed(() => `${props.bottom}px`)
-const styleRight = computed(() => `${props.right}px`)
+
+const backTopStyle = computed(() => ({
+  right: `${props.right}px`,
+  bottom: `${props.bottom}px`,
+}))
 
 const scrollToTop = () => {
   if (!el.value) return
@@ -69,6 +69,9 @@ const handleClick = (event: MouseEvent) => {
 const handleScrollThrottled = useThrottleFn(handleScroll, 300)
 
 onMounted(() => {
+  container.value = document
+  el.value = document.documentElement
+
   if (props.target) {
     el.value = document.querySelector<HTMLElement>(props.target) ?? undefined
     if (!el.value) {
diff --git a/packages/theme-chalk/src/backtop.scss b/packages/theme-chalk/src/backtop.scss
index d157a9043d..135fc73d0e 100644
--- a/packages/theme-chalk/src/backtop.scss
+++ b/packages/theme-chalk/src/backtop.scss
@@ -6,21 +6,21 @@
   @include set-component-css-var('backtop', $backtop);
 
   position: fixed;
-  background-color: var(--el-backtop-bg-color);
+  background-color: getCssVar('backtop', 'bg-color');
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  color: var(--el-backtop-text-color);
+  color: getCssVar('backtop', 'text-color');
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
-  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
+  box-shadow: getCssVar('box-shadow', 'lighter');
   cursor: pointer;
   z-index: 5;
 
   &:hover {
-    background-color: var(--el-backtop-hover-bg-color);
+    background-color: getCssVar('backtop', 'hover-bg-color');
   }
 
   @include e(icon) {
diff --git a/packages/theme-chalk/src/button.scss b/packages/theme-chalk/src/button.scss
index 680ad1b012..da7750a4fb 100644
--- a/packages/theme-chalk/src/button.scss
+++ b/packages/theme-chalk/src/button.scss
@@ -134,7 +134,7 @@ $button-icon-span-gap: map.merge(
       right: -1px;
       bottom: -1px;
       border-radius: inherit;
-      background-color: rgba(255, 255, 255, 0.35);
+      background-color: getCssVar('mask-color', 'extra-light');
     }
   }
   @include when(round) {
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 4f2aa077b4..3aa225f629 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -174,11 +174,21 @@ $border-radius: map.merge(
 $box-shadow: () !default;
 $box-shadow: map.merge(
   (
-    'base': (
-      0 2px 4px rgba(0, 0, 0, 0.12),
-      0 0 6px rgba(0, 0, 0, 0.04),
+    '': (
+      0px 12px 32px 4px rgba(0, 0, 0, 0.04),
+      0px 8px 20px rgba(0, 0, 0, 0.08),
+    ),
+    'light': (
+      0px 0px 12px rgba(0, 0, 0, 0.12),
+    ),
+    'lighter': (
+      0px 0px 6px rgba(0, 0, 0, 0.12),
+    ),
+    'dark': (
+      0px 16px 48px 16px rgba(0, 0, 0, 0.08),
+      0px 12px 32px rgba(0, 0, 0, 0.12),
+      0px 8px 16px -8px rgba(0, 0, 0, 0.16),
     ),
-    'light': 0 2px 12px 0 rgba(0, 0, 0, 0.1),
   ),
   $box-shadow
 );
@@ -239,6 +249,27 @@ $common-component-size: map.merge(
   $common-component-size
 );
 
+// overlay
+$overlay-color: () !default;
+$overlay-color: map.merge(
+  (
+    '': rgba(0, 0, 0, 0.8),
+    'light': rgba(0, 0, 0, 0.7),
+    'lighter': rgba(0, 0, 0, 0.5),
+  ),
+  $overlay-color
+);
+
+// mask
+$mask-color: () !default;
+$mask-color: map.merge(
+  (
+    '': rgba(255, 255, 255, 0.9),
+    'extra-light': rgba(255, 255, 255, 0.3),
+  ),
+  $mask-color
+);
+
 // Components
 // ---
 // Checkbox
@@ -716,7 +747,7 @@ $dialog: map.merge(
     'width': 50%,
     'margin-top': 15vh,
     'bg-color': getCssVar('color-white'),
-    'box-shadow': 0 1px 3px rgba(0, 0, 0, 0.3),
+    'box-shadow': getCssVar('box-shadow'),
     'title-font-size': getCssVar('font-size-large'),
     'content-font-size': 14px,
     'font-line-height': getCssVar('font-line-height-primary'),
@@ -738,7 +769,7 @@ $table: map.merge(
     'row-hover-bg-color': getCssVar('fill-color', 'light'),
     'current-row-bg-color': getCssVar('color-primary-light-9'),
     'header-bg-color': getCssVar('fill-color', 'blank'),
-    'fixed-box-shadow': 0 0 10px rgba(0, 0, 0, 0.12),
+    'fixed-box-shadow': getCssVar('box-shadow', 'light'),
     'bg-color': getCssVar('fill-color', 'blank'),
     'tr-bg-color': getCssVar('fill-color', 'blank'),
     'expanded-cell-bg-color': getCssVar('fill-color', 'blank'),
diff --git a/packages/theme-chalk/src/drawer.scss b/packages/theme-chalk/src/drawer.scss
index f545a3debc..b95a93a938 100644
--- a/packages/theme-chalk/src/drawer.scss
+++ b/packages/theme-chalk/src/drawer.scss
@@ -14,8 +14,7 @@ $directions: rtl, ltr, ttb, btt;
   background-color: var(--el-drawer-bg-color);
   display: flex;
   flex-direction: column;
-  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
-    0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
+  box-shadow: getCssVar('box-shadow', 'dark');
   overflow: hidden;
 
   transition: all var(--el-transition-duration);
diff --git a/packages/theme-chalk/src/dropdown.scss b/packages/theme-chalk/src/dropdown.scss
index e1debd6135..266a54160f 100644
--- a/packages/theme-chalk/src/dropdown.scss
+++ b/packages/theme-chalk/src/dropdown.scss
@@ -108,7 +108,7 @@ $dropdown-divider-width: 1px !default;
       top: $gap;
       bottom: $gap;
       left: 0;
-      background: rgba(0, 0, 0, 0.5);
+      background: getCssVar('overlay-color', 'lighter');
     }
 
     &.#{$namespace}-button::before {
diff --git a/packages/theme-chalk/src/loading.scss b/packages/theme-chalk/src/loading.scss
index 47bab6c3d9..de565cacc0 100644
--- a/packages/theme-chalk/src/loading.scss
+++ b/packages/theme-chalk/src/loading.scss
@@ -21,7 +21,7 @@
 @include b(loading-mask) {
   position: absolute;
   z-index: 2000;
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: getCssVar('mask-color');
   margin: 0;
   top: 0;
   right: 0;
diff --git a/packages/theme-chalk/src/overlay.scss b/packages/theme-chalk/src/overlay.scss
index 1b2ed29d84..89dbaf7b2a 100644
--- a/packages/theme-chalk/src/overlay.scss
+++ b/packages/theme-chalk/src/overlay.scss
@@ -12,6 +12,6 @@
   left: 0;
   z-index: 2000;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: getCssVar('overlay-color', 'lighter');
   overflow: auto;
 }
diff --git a/packages/theme-chalk/src/tabs.scss b/packages/theme-chalk/src/tabs.scss
index 9d65845d93..6c7a3712d7 100644
--- a/packages/theme-chalk/src/tabs.scss
+++ b/packages/theme-chalk/src/tabs.scss
@@ -225,7 +225,6 @@
   @include m(border-card) {
     background: $color-white;
     border: 1px solid getCssVar('border-color');
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
 
     > .#{$namespace}-tabs__content {
       padding: 15px;
diff --git a/packages/theme-chalk/src/upload.scss b/packages/theme-chalk/src/upload.scss
index 5d34ad0f7f..9e8771bf69 100644
--- a/packages/theme-chalk/src/upload.scss
+++ b/packages/theme-chalk/src/upload.scss
@@ -372,7 +372,7 @@
       color: #fff;
       opacity: 0;
       font-size: 20px;
-      background-color: rgba(0, 0, 0, 0.5);
+      background-color: getCssVar('overlay-color', 'lighter');
       transition: opacity var(--el-transition-duration);
 
       span {
@@ -518,7 +518,6 @@
     background: var(--el-color-success);
     text-align: center;
     transform: rotate(45deg);
-    box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.2);
 
     i {
       font-size: 12px;
@@ -553,7 +552,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(#000, 0.72);
+    background-color: getCssVar('overlay-color', 'light');
     text-align: center;
 
     .btn {
diff --git a/packages/theme-chalk/src/var.scss b/packages/theme-chalk/src/var.scss
index 45d0d9235c..d06ab04a78 100644
--- a/packages/theme-chalk/src/var.scss
+++ b/packages/theme-chalk/src/var.scss
@@ -56,6 +56,9 @@
   @include set-component-css-var('disabled', $disabled);
   // z-index --el-index-#{$type}
   @include set-component-css-var('index', $z-index);
+  // overlay & mask
+  @include set-component-css-var('overlay-color', $overlay-color);
+  @include set-component-css-var('mask-color', $mask-color);
 
   // Border
   @include set-css-var-value('border-width', $border-width);