diff --git a/lib/web_ui/lib/src/engine/surface/backdrop_filter.dart b/lib/web_ui/lib/src/engine/surface/backdrop_filter.dart
index 2813b495a973e..32066f7d5dcc4 100644
--- a/lib/web_ui/lib/src/engine/surface/backdrop_filter.dart
+++ b/lib/web_ui/lib/src/engine/surface/backdrop_filter.dart
@@ -72,11 +72,10 @@ class PersistedBackdropFilter extends PersistedContainerSurface
       ..transform = 'translate(${rect.left}px, ${rect.top}px)'
       ..width = '${rect.width}px'
       ..height = '${rect.height}px';
-    if (browserEngine == BrowserEngine.blink) {
-      // For Chrome render transparent black background.
+    if (browserEngine == BrowserEngine.firefox) {
+      // For FireFox for now render transparent black background.
       // TODO(flutter_web): Switch code to use filter when
-      // https://bugs.chromium.org/p/chromium/issues/detail?id=497522#c213
-      // is fixed.
+      // See https://caniuse.com/#feat=css-backdrop-filter.
       filterElementStyle
         ..backgroundColor = '#000'
         ..opacity = '0.2';
@@ -84,6 +83,10 @@ class PersistedBackdropFilter extends PersistedContainerSurface
       // CSS uses pixel radius for blur. Flutter & SVG use sigma parameters. For
       // Gaussian blur with standard deviation (normal distribution),
       // the blur will fall within 2 * sigma pixels.
+      if (browserEngine == BrowserEngine.webkit) {
+        domRenderer.setElementStyle(_filterElement, '-webkit-backdrop-filter',
+            _imageFilterToCss(filter));
+      }
       domRenderer.setElementStyle(_filterElement, 'backdrop-filter', _imageFilterToCss(filter));
     }
   }