diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts b/core/src/components/textarea/test/fill/textarea.e2e.ts
index 510ab22de68..aa341ae5661 100644
--- a/core/src/components/textarea/test/fill/textarea.e2e.ts
+++ b/core/src/components/textarea/test/fill/textarea.e2e.ts
@@ -2,9 +2,9 @@ import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
 /**
- * Fill is only available in MD mode
+ * Fill is only available in MD and Ionic
  */
-configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('textarea: fill'), () => {
     test.describe('textarea: fill solid', () => {
       test('should not have visual regressions', async ({ page }) => {
@@ -13,6 +13,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           <ion-textarea
             fill="solid"
             label="Email"
+            label-placement="stacked"
             value="hi@ionic.io"
             helper-text="Enter your email"
             maxlength="20"
@@ -25,49 +26,12 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         const textarea = page.locator('ion-textarea');
         await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-solid`));
       });
-      test('should render correctly with floating label', async ({ page }) => {
-        await page.setContent(
-          `
-          <ion-textarea
-            fill="solid"
-            label="Email"
-            label-placement="floating"
-            value="hi@ionic.io"
-            helper-text="Enter your email"
-            maxlength="20"
-            counter="true"
-          ></ion-textarea>
-        `,
-          config
-        );
-
-        const textarea = page.locator('ion-textarea');
-        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-solid-label-floating`));
-      });
-      test('should not have visual regressions with shaped solid', async ({ page }) => {
-        await page.setContent(
-          `
-          <ion-textarea
-            shape="round"
-            fill="solid"
-            label="Email"
-            value="hi@ionic.io"
-            helper-text="Enter your email"
-            maxlength="20"
-            counter="true"
-          ></ion-textarea>
-        `,
-          config
-        );
-
-        const textarea = page.locator('ion-textarea');
-        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-shaped-solid`));
-      });
-      test('padding and border radius should be customizable', async ({ page }) => {
+      test('padding, border radius, and background should be customizable', async ({ page }) => {
         await page.setContent(
           `
           <style>
             ion-textarea {
+              --background: #e5e5e5 !important;
               --border-radius: 10px !important;
               --padding-start: 50px !important;
               --padding-end: 50px !important;
@@ -78,7 +42,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
             shape="round"
             fill="solid"
             label="Email"
-            label-placement="floating"
+            label-placement="stacked"
             value="hi@ionic.io"
             helper-text="Enter your email"
             maxlength="20"
@@ -99,6 +63,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           <ion-textarea
             fill="outline"
             label="Email"
+            label-placement="stacked"
             value="hi@ionic.io"
             helper-text="Enter your email"
             maxlength="20"
@@ -111,13 +76,23 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         const textarea = page.locator('ion-textarea');
         await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-outline`));
       });
-      test('should render correctly with floating label', async ({ page }) => {
+      test('padding, border radius, and background should be customizable', async ({ page }) => {
         await page.setContent(
           `
+          <style>
+            ion-textarea {
+              --background: #e5e5e5 !important;
+              --border-radius: 10px !important;
+              --padding-start: 50px !important;
+              --padding-end: 50px !important;
+            }
+          </style>
+
           <ion-textarea
+            shape="round"
             fill="outline"
             label="Email"
-            label-placement="floating"
+            label-placement="stacked"
             value="hi@ionic.io"
             helper-text="Enter your email"
             maxlength="20"
@@ -128,15 +103,25 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         );
 
         const textarea = page.locator('ion-textarea');
-        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-outline-label-floating`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-shaped-outline-custom`));
       });
-      test('should not have visual regressions with shaped outline', async ({ page }) => {
+    });
+  });
+});
+
+/**
+ * Fill with floating label is only available in MD mode
+ */
+configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('textarea: fill'), () => {
+    test.describe('textarea: fill solid', () => {
+      test('should render correctly with floating label', async ({ page }) => {
         await page.setContent(
           `
           <ion-textarea
-            shape="round"
-            fill="outline"
+            fill="solid"
             label="Email"
+            label-placement="floating"
             value="hi@ionic.io"
             helper-text="Enter your email"
             maxlength="20"
@@ -147,21 +132,14 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         );
 
         const textarea = page.locator('ion-textarea');
-        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-shaped-outline`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-solid-label-floating`));
       });
-      test('padding and border radius should be customizable', async ({ page }) => {
+    });
+    test.describe('textarea: fill outline', () => {
+      test('should render correctly with floating label', async ({ page }) => {
         await page.setContent(
           `
-          <style>
-            ion-textarea {
-              --border-radius: 10px !important;
-              --padding-start: 50px !important;
-              --padding-end: 50px !important;
-            }
-          </style>
-
           <ion-textarea
-            shape="round"
             fill="outline"
             label="Email"
             label-placement="floating"
@@ -175,7 +153,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         );
 
         const textarea = page.locator('ion-textarea');
-        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-shaped-outline-custom`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-outline-label-floating`));
       });
     });
   });
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..3aa92aa13ff
Binary files /dev/null and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2ed7db0b20d
Binary files /dev/null and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..0eacd2e4a17
Binary files /dev/null and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-label-floating-md-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-label-floating-md-rtl-Mobile-Chrome-linux.png
index d159e730e8d..aae7d4c14e2 100644
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-label-floating-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-label-floating-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-label-floating-md-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-label-floating-md-rtl-Mobile-Firefox-linux.png
index 5853fe510ba..99d5de9e282 100644
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-label-floating-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-label-floating-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-md-ltr-Mobile-Chrome-linux.png
index 887336bbc87..db412acd0d0 100644
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-md-ltr-Mobile-Firefox-linux.png
index fddc3d94290..114a4b894dc 100644
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-md-ltr-Mobile-Safari-linux.png
index 79acef52bd3..5cc4bf823ee 100644
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-md-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-md-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-md-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index 6d52a8180a0..00000000000
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-md-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-md-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-md-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index 0eb3ee042ba..00000000000
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-md-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-md-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-md-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index 0b63804562a..00000000000
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-md-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1364b6afb15
Binary files /dev/null and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..53f5e6ab887
Binary files /dev/null and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..99d28c6c010
Binary files /dev/null and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-md-ltr-Mobile-Chrome-linux.png
index a0e7fd86b98..837a699b496 100644
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-md-ltr-Mobile-Firefox-linux.png
index 1473e10fc1f..77756524012 100644
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-md-ltr-Mobile-Safari-linux.png
index 62dde75210b..9a7b9cd2fd8 100644
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-md-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-md-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-md-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index ead585da292..00000000000
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-md-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-md-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-md-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index e8bda5d7612..00000000000
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-md-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-md-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-md-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index 1e2877facd5..00000000000
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-custom-md-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-md-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index fd1c4776edb..00000000000
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-md-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-md-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index 77ff16d8ac2..00000000000
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-md-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-md-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 99bfe88475b..00000000000
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-md-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-md-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-md-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index e6926496ae1..00000000000
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-md-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-md-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-md-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index e4a41c4f086..00000000000
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-md-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-md-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-md-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index cf5d408845a..00000000000
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-outline-md-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..61262aa875e
Binary files /dev/null and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e67b8bf70a4
Binary files /dev/null and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..53475d73420
Binary files /dev/null and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-md-ltr-Mobile-Chrome-linux.png
index e81d0f297d7..c6d6f9ca677 100644
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-md-ltr-Mobile-Firefox-linux.png
index e120204f4c0..27efb812ebd 100644
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-md-ltr-Mobile-Safari-linux.png
index 1ec3a0ec3bf..0f8d27f0eb3 100644
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-md-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-md-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-md-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index 7c03f79cf47..00000000000
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-md-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-md-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-md-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index 55c2f7f4389..00000000000
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-md-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-md-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-md-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index 81a7080fe2f..00000000000
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-md-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-md-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index 394f7c96112..00000000000
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-md-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-md-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index 952696d23c4..00000000000
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-md-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-md-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 9ff52a3aa87..00000000000
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-md-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-md-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-md-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index 50603ebff8d..00000000000
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-md-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-md-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-md-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index 62ef4774123..00000000000
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-md-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-md-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-md-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index e2d65826742..00000000000
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-md-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..25b0b3d65f4
Binary files /dev/null and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4024fc72e59
Binary files /dev/null and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..1a80d4baeb4
Binary files /dev/null and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-label-floating-md-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-label-floating-md-rtl-Mobile-Chrome-linux.png
index 0a3f42fdc0d..c69a74373db 100644
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-label-floating-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-label-floating-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-ltr-Mobile-Chrome-linux.png
index 84989b2d27e..b8f6c35e42f 100644
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-ltr-Mobile-Firefox-linux.png
index 41fe31ef235..8813c0c165c 100644
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-ltr-Mobile-Safari-linux.png
index d6d7dbc0ff2..3ca916e268e 100644
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index d50ddf6d1f4..00000000000
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index ee850d070e0..00000000000
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index d4aa62624b2..00000000000
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts b/core/src/components/textarea/test/shape/textarea.e2e.ts
index f78f8332d3b..8f3f02dc364 100644
--- a/core/src/components/textarea/test/shape/textarea.e2e.ts
+++ b/core/src/components/textarea/test/shape/textarea.e2e.ts
@@ -1,6 +1,38 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
+/**
+ * This behavior does not vary across directions.
+ * The round shape is only available in the Ionic and Material Design themes.
+ * Shapes with different fill types are only available in the Material Design theme.
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('textarea: shape'), () => {
+    test.describe('fill: solid', () => {
+      test.describe('round', () => {
+        test('should not have visual regressions', async ({ page }) => {
+          await page.setContent(
+            `
+            <ion-textarea
+              shape="round"
+              fill="solid"
+              label="Email"
+              label-placement="stacked"
+              value="hi@ionic.io"
+            ></ion-textarea>
+          `,
+            config
+          );
+
+          const textarea = page.locator('ion-textarea');
+
+          await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-solid-shape-round`));
+        });
+      });
+    });
+  });
+});
+
 /**
  * This behavior does not vary across directions
  * The round shape is only available in the Ionic and Material Design themes
diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-fill-solid-shape-round-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-fill-solid-shape-round-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2b57a9a31ae
Binary files /dev/null and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-fill-solid-shape-round-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-fill-solid-shape-round-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-fill-solid-shape-round-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..93d75d40a35
Binary files /dev/null and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-fill-solid-shape-round-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-fill-solid-shape-round-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-fill-solid-shape-round-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..1820e0b8db8
Binary files /dev/null and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-fill-solid-shape-round-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/textarea.ionic.outline.scss b/core/src/components/textarea/textarea.ionic.outline.scss
index 915a1ca64ed..5a5f69a34b6 100644
--- a/core/src/components/textarea/textarea.ionic.outline.scss
+++ b/core/src/components/textarea/textarea.ionic.outline.scss
@@ -11,6 +11,10 @@
 // Textarea Fill: Outline, Textarea Wrapper
 // ----------------------------------------------------------------
 
+:host(.textarea-fill-outline) .textarea-wrapper {
+  background: initial;
+}
+
 :host(.textarea-fill-outline) .textarea-wrapper-inner {
   /**
    * The border should be relative to the inner wrapper
@@ -34,6 +38,8 @@
   pointer-events: none;
 
   border: var(--border-width) var(--border-style) var(--border-color);
+
+  background: var(--background);
 }
 
 // Textarea Fill: Outline, Bottom Content