diff --git a/packages/docusaurus-theme-classic/src/theme/SkipToContent/index.tsx b/packages/docusaurus-theme-classic/src/theme/SkipToContent/index.tsx
index 5f8fa92637f5..d13943c02ad9 100644
--- a/packages/docusaurus-theme-classic/src/theme/SkipToContent/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/SkipToContent/index.tsx
@@ -6,7 +6,6 @@
  */
 
 import React, {useRef} from 'react';
-import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
 import {useLocationChange} from '@docusaurus/theme-common';
 
@@ -40,10 +39,7 @@ function SkipToContent(): JSX.Element {
 
   return (
     <div ref={containerRef}>
-      <a
-        href="#main"
-        className={clsx(styles.skipToContent, 'shadow--md')}
-        onClick={handleSkip}>
+      <a href="#main" className={styles.skipToContent} onClick={handleSkip}>
         <Translate
           id="theme.common.skipToMainContent"
           description="The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation">
diff --git a/packages/docusaurus-theme-classic/src/theme/SkipToContent/styles.module.css b/packages/docusaurus-theme-classic/src/theme/SkipToContent/styles.module.css
index d17508a7b79c..1ded61ed5c3a 100644
--- a/packages/docusaurus-theme-classic/src/theme/SkipToContent/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/SkipToContent/styles.module.css
@@ -10,4 +10,5 @@
 
 .skipToContent:focus {
   left: 1rem;
+  box-shadow: var(--ifm-global-shadow-md);
 }