diff --git a/change/@fluentui-react-textarea-0dad2dd6-d586-4358-ba42-c9a6b9a0bfc9.json b/change/@fluentui-react-textarea-0dad2dd6-d586-4358-ba42-c9a6b9a0bfc9.json
new file mode 100644
index 00000000000000..a4fac4bd0e0686
--- /dev/null
+++ b/change/@fluentui-react-textarea-0dad2dd6-d586-4358-ba42-c9a6b9a0bfc9.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Adding filled with shadow appearance.",
+  "packageName": "@fluentui/react-textarea",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-textarea/etc/react-textarea.api.md b/packages/react-components/react-textarea/etc/react-textarea.api.md
index bb5841e7203527..033194d9e76a70 100644
--- a/packages/react-components/react-textarea/etc/react-textarea.api.md
+++ b/packages/react-components/react-textarea/etc/react-textarea.api.md
@@ -22,7 +22,7 @@ export const textareaClassNames: SlotClassNames<TextareaSlots>;
 
 // @public
 export type TextareaProps = Omit<ComponentProps<Partial<TextareaSlots>, 'textarea'>, 'defaultValue' | 'onChange' | 'size' | 'value'> & {
-    appearance?: 'outline' | 'filled-darker' | 'filled-lighter';
+    appearance?: 'outline' | 'filled-darker' | 'filled-lighter' | 'filled-darker-shadow' | 'filled-lighter-shadow';
     defaultValue?: string;
     onChange?: (ev: React_2.ChangeEvent<HTMLTextAreaElement>, data: TextareaOnChangeData) => void;
     resize?: 'none' | 'horizontal' | 'vertical' | 'both';
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 ef54e1aced9548..2d5e48c7132852 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
@@ -28,7 +28,7 @@ export type TextareaProps = Omit<
    *
    * @default outline
    */
-  appearance?: 'outline' | 'filled-darker' | 'filled-lighter';
+  appearance?: 'outline' | 'filled-darker' | 'filled-lighter' | 'filled-darker-shadow' | 'filled-lighter-shadow';
 
   /**
    * The default value of the Textarea.
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 039920dfbdf661..b87e5adb72547c 100644
--- a/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.ts
+++ b/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.ts
@@ -115,6 +115,18 @@ const useRootStyles = makeStyles({
     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),
+    boxShadow: tokens.shadow2,
+  },
+
   outline: {
     backgroundColor: tokens.colorNeutralBackground1,
     ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),
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 1dcace710fefa8..a6373aee02004a 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,7 +35,9 @@ 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 (
@@ -54,6 +56,26 @@ 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>
   );
 };