diff --git a/lib/web_ui/dev/goldens_lock.yaml b/lib/web_ui/dev/goldens_lock.yaml
index 0b8e6e25c74b5..be257b7de1965 100644
--- a/lib/web_ui/dev/goldens_lock.yaml
+++ b/lib/web_ui/dev/goldens_lock.yaml
@@ -1,2 +1,2 @@
 repository: https://github.com/flutter/goldens.git
-revision: 57327a39aba333794a092d4e72777bb37102f8ba
+revision: f1e5b87249f54998e23a34788e19ec864358e50b
diff --git a/lib/web_ui/lib/src/engine/html/scene_builder.dart b/lib/web_ui/lib/src/engine/html/scene_builder.dart
index 77a9197ca2d1e..1749fcb2101b0 100644
--- a/lib/web_ui/lib/src/engine/html/scene_builder.dart
+++ b/lib/web_ui/lib/src/engine/html/scene_builder.dart
@@ -563,9 +563,9 @@ class SurfaceSceneBuilder implements ui.SceneBuilder {
   }
 }
 
-// TODO(yjbanov): in HTML the blur looks too aggressive. The current
-//                implementation was copied from the existing backdrop-filter
-//                but probably needs a revision.
+// HTML only supports a single radius, but Flutter ImageFilter supports separate
+// horizontal and vertical radii. The best approximation we can provide is to
+// average the two radii together for a single compromise value.
 String _imageFilterToCss(EngineImageFilter filter) {
-  return 'blur(${math.max(filter.sigmaX, filter.sigmaY) * 2}px)';
+  return 'blur(${(filter.sigmaX + filter.sigmaY) / 2}px)';
 }