diff --git a/change/@fluentui-react-input-7cb0a348-cba2-4166-a8a0-9e173e884bd0.json b/change/@fluentui-react-input-7cb0a348-cba2-4166-a8a0-9e173e884bd0.json
new file mode 100644
index 0000000000000..91b1a59be3150
--- /dev/null
+++ b/change/@fluentui-react-input-7cb0a348-cba2-4166-a8a0-9e173e884bd0.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore: Deprecating filled with shadow appearance variant.",
+  "packageName": "@fluentui/react-input",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-textarea-e5a09262-3430-4d49-b351-e92d50119fd4.json b/change/@fluentui-react-textarea-e5a09262-3430-4d49-b351-e92d50119fd4.json
new file mode 100644
index 0000000000000..de966869cc622
--- /dev/null
+++ b/change/@fluentui-react-textarea-e5a09262-3430-4d49-b351-e92d50119fd4.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: Deprecating filled with shadow appearance variant.",
+  "packageName": "@fluentui/react-textarea",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-input/src/components/Input/Input.types.ts b/packages/react-components/react-input/src/components/Input/Input.types.ts
index 4cf9e1181cb1c..79a8a8500f4ae 100644
--- a/packages/react-components/react-input/src/components/Input/Input.types.ts
+++ b/packages/react-components/react-input/src/components/Input/Input.types.ts
@@ -47,6 +47,8 @@ export type InputProps = Omit<
   /**
    * Controls the colors and borders of the input.
    * @default 'outline'
+   *
+   * Note: 'filled-darker-shadow' and 'filled-lighter-shadow' are deprecated and will be removed in the future.
    */
   appearance?:
     | 'outline'
diff --git a/packages/react-components/react-input/src/components/Input/useInput.ts b/packages/react-components/react-input/src/components/Input/useInput.ts
index c4ac4570e62ca..e13bbcd0368d1 100644
--- a/packages/react-components/react-input/src/components/Input/useInput.ts
+++ b/packages/react-components/react-input/src/components/Input/useInput.ts
@@ -19,6 +19,17 @@ import type { InputProps, InputState } from './Input.types';
 export const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputElement>): InputState => {
   const { size = 'medium', appearance = 'outline', onChange } = props;
 
+  if (
+    process.env.NODE_ENV !== 'production' &&
+    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')
+  ) {
+    // eslint-disable-next-line no-console
+    console.error(
+      "The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the" +
+        ' future.',
+    );
+  }
+
   const [value, setValue] = useControllableState({
     state: props.value,
     defaultState: props.defaultValue,
diff --git a/packages/react-components/react-input/src/stories/Input/InputAppearance.stories.tsx b/packages/react-components/react-input/src/stories/Input/InputAppearance.stories.tsx
index 424e04d98aa11..ecb1a7620ce7b 100644
--- a/packages/react-components/react-input/src/stories/Input/InputAppearance.stories.tsx
+++ b/packages/react-components/react-input/src/stories/Input/InputAppearance.stories.tsx
@@ -32,8 +32,6 @@ export const Appearance = () => {
   const underlineId = useId('input-underline');
   const filledLighterId = useId('input-filledLighter');
   const filledDarkerId = useId('input-filledDarker');
-  const filledLighterShadowId = useId('input-filledLighterShadow');
-  const filledDarkerShadowId = useId('input-filledDarkerShadow');
   const styles = useStyles();
 
   return (
@@ -57,16 +55,6 @@ export const Appearance = () => {
         <Label htmlFor={filledDarkerId}>Filled darker appearance</Label>
         <Input appearance="filled-darker" id={filledDarkerId} />
       </div>
-
-      <div className={mergeClasses(styles.field, styles.filledLighter)}>
-        <Label htmlFor={filledLighterShadowId}>Filled lighter appearance with shadow</Label>
-        <Input appearance="filled-lighter-shadow" id={filledLighterShadowId} />
-      </div>
-
-      <div className={mergeClasses(styles.field, styles.filledDarker)}>
-        <Label htmlFor={filledDarkerShadowId}>Filled darker appearance with shadow</Label>
-        <Input appearance="filled-darker-shadow" id={filledDarkerShadowId} />
-      </div>
     </div>
   );
 };
diff --git a/packages/react-components/react-textarea/src/components/Textarea/Textarea.types.ts b/packages/react-components/react-textarea/src/components/Textarea/Textarea.types.ts
index 2d5e48c713285..7d1f1483b1143 100644
--- a/packages/react-components/react-textarea/src/components/Textarea/Textarea.types.ts
+++ b/packages/react-components/react-textarea/src/components/Textarea/Textarea.types.ts
@@ -27,6 +27,8 @@ export type TextareaProps = Omit<
    * Styling the Textarea should use.
    *
    * @default outline
+   *
+   * Note: 'filled-darker-shadow' and 'filled-lighter-shadow' are deprecated and will be removed in the future.
    */
   appearance?: 'outline' | 'filled-darker' | 'filled-lighter' | 'filled-darker-shadow' | 'filled-lighter-shadow';
 
diff --git a/packages/react-components/react-textarea/src/components/Textarea/useTextarea.ts b/packages/react-components/react-textarea/src/components/Textarea/useTextarea.ts
index 27fed0c6c9b91..6f012a5f7cd27 100644
--- a/packages/react-components/react-textarea/src/components/Textarea/useTextarea.ts
+++ b/packages/react-components/react-textarea/src/components/Textarea/useTextarea.ts
@@ -19,6 +19,17 @@ import type { TextareaProps, TextareaState } from './Textarea.types';
 export const useTextarea_unstable = (props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>): TextareaState => {
   const { size = 'medium', appearance = 'outline', resize = 'none', onChange } = props;
 
+  if (
+    process.env.NODE_ENV !== 'production' &&
+    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')
+  ) {
+    // eslint-disable-next-line no-console
+    console.error(
+      "The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the" +
+        ' future.',
+    );
+  }
+
   const [value, setValue] = useControllableState({
     state: props.value,
     defaultState: props.defaultValue,
diff --git a/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.ts b/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.ts
index b87e5adb72547..f2afe781e9f98 100644
--- a/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.ts
+++ b/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.ts
@@ -114,13 +114,11 @@ const useRootStyles = makeStyles({
   'filled-lighter': {
     backgroundColor: tokens.colorNeutralBackground1,
   },
-
   'filled-darker-shadow': {
     backgroundColor: tokens.colorNeutralBackground3,
     ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),
     boxShadow: tokens.shadow2,
   },
-
   'filled-lighter-shadow': {
     backgroundColor: tokens.colorNeutralBackground1,
     ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),
diff --git a/packages/react-components/react-textarea/src/stories/Textarea/TextareaAppearance.stories.tsx b/packages/react-components/react-textarea/src/stories/Textarea/TextareaAppearance.stories.tsx
index a6373aee02004..1dcace710fefa 100644
--- a/packages/react-components/react-textarea/src/stories/Textarea/TextareaAppearance.stories.tsx
+++ b/packages/react-components/react-textarea/src/stories/Textarea/TextareaAppearance.stories.tsx
@@ -35,9 +35,7 @@ const useStyles = makeStyles({
 export const Appearance = () => {
   const outlineId = useId('textarea-outline');
   const filledDarkerId = useId('textarea-filleddarker');
-  const filledDarkerShadowId = useId('textarea-filleddarkershadow');
   const filledLighterId = useId('textarea-filledlighter');
-  const filledLighterShadowId = useId('textarea-filledlightershadow');
   const styles = useStyles();
 
   return (
@@ -56,26 +54,6 @@ export const Appearance = () => {
         <Label htmlFor={filledLighterId}>Textarea with Filled Lighter appearance.</Label>
         <Textarea id={filledLighterId} appearance="filled-lighter" placeholder="type here..." resize="both" />
       </div>
-
-      <div className={styles.filledDarker}>
-        <Label htmlFor={filledDarkerShadowId}>Textarea with Filled Darker with shadow appearance.</Label>
-        <Textarea
-          id={filledDarkerShadowId}
-          appearance="filled-darker-shadow"
-          placeholder="type here..."
-          resize="both"
-        />
-      </div>
-
-      <div className={styles.filledLighter}>
-        <Label htmlFor={filledLighterShadowId}>Textarea with Filled Lighter with shadow appearance.</Label>
-        <Textarea
-          id={filledLighterShadowId}
-          appearance="filled-lighter-shadow"
-          placeholder="type here..."
-          resize="both"
-        />
-      </div>
     </div>
   );
 };