diff --git a/core/src/components/fab-button/fab-button.ios.scss b/core/src/components/fab-button/fab-button.ios.scss
index 8d16121c29..424a039762 100755
--- a/core/src/components/fab-button/fab-button.ios.scss
+++ b/core/src/components/fab-button/fab-button.ios.scss
@@ -48,20 +48,23 @@
 // Translucent FAB buttons
 // --------------------------------------------------
 
-:host(.fab-translucent) {
+:host(.fab-button-translucent) {
   --background: #{$fab-ios-translucent-background-color};
   --backdrop-filter: #{$fab-ios-translucent-filter};
 }
 
-:host(.fab-translucent-in-list) {
+:host(.fab-button-translucent-in-list) {
   --background: #{$fab-ios-list-button-translucent-background-color};
 }
 
-// .fab-translucent-ios-#{$color-name} {
-//   background-color: ion-color($color-name, base, $fab-ios-translucent-background-color-alpha);
-//   opacity: .8;
-// }
+// Translucent FAB buttons with color
+// --------------------------------------------------
 
-// .fab-translucent-ios-#{$color-name}.activated {
-//   opacity: 1;
-// }
+:host(.ion-color.fab-button-translucent) .button-native {
+  background: #{current-color(base, $fab-ios-translucent-background-color-alpha)};
+}
+
+:host(.ion-color.focused.fab-button-translucent) .button-native,
+:host(.ion-color.activated.fab-button-translucent) .button-native {
+  background: #{current-color(base)};
+}
diff --git a/core/src/components/fab/test/translucent/e2e.ts b/core/src/components/fab/test/translucent/e2e.ts
new file mode 100644
index 0000000000..ce6c9a4847
--- /dev/null
+++ b/core/src/components/fab/test/translucent/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('fab: translucent', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/fab/test/translucent?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/toolbar/toolbar.ios.vars.scss b/core/src/components/toolbar/toolbar.ios.vars.scss
index d6ef5bfa25..f6ce545c3c 100644
--- a/core/src/components/toolbar/toolbar.ios.vars.scss
+++ b/core/src/components/toolbar/toolbar.ios.vars.scss
@@ -36,9 +36,6 @@ $toolbar-ios-button-strong-font-weight:             600 !default;
 /// @prop - Fill color of the toolbar button icon
 $toolbar-ios-button-icon-fill-color:                currentColor !default;
 
-/// @prop - Filter of the translucent toolbar
-$toolbar-ios-translucent-filter:                    saturate(180%) blur(20px) !default;
-
 
 // iOS Title
 // --------------------------------------------------