diff --git a/lib/web_ui/dev/goldens_lock.yaml b/lib/web_ui/dev/goldens_lock.yaml
index 1b73145f48a3b..f32239505dc7a 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: 8f692819e8881b7d2131dbd61d965c21d5e3e345
+revision: ae6003206eb721137c20cd56d8d1d8e2a76d6dd1
diff --git a/lib/web_ui/lib/src/engine/canvas_pool.dart b/lib/web_ui/lib/src/engine/canvas_pool.dart
index b5119afb82c10..3702513e261a2 100644
--- a/lib/web_ui/lib/src/engine/canvas_pool.dart
+++ b/lib/web_ui/lib/src/engine/canvas_pool.dart
@@ -613,7 +613,12 @@ class _CanvasPool extends _SaveStackTracking {
         context.save();
         context.filter = 'none';
         context.strokeStyle = '';
-        context.fillStyle = colorToCssString(color);
+        final int red = color.red;
+        final int green = color.green;
+        final int blue = color.blue;
+        // Multiply by 0.4 to make shadows less aggressive (https://github.com/flutter/flutter/issues/52734)
+        final int alpha = (0.4 * color.alpha).round();
+        context.fillStyle = colorComponentsToCssString(red, green, blue, alpha);
         context.shadowBlur = shadow.blurWidth;
         context.shadowColor = colorToCssString(color.withAlpha(0xff));
         context.shadowOffsetX = shadow.offset.dx;
diff --git a/lib/web_ui/lib/src/engine/shadow.dart b/lib/web_ui/lib/src/engine/shadow.dart
index 3c46dac7681b5..62806e029b518 100644
--- a/lib/web_ui/lib/src/engine/shadow.dart
+++ b/lib/web_ui/lib/src/engine/shadow.dart
@@ -133,7 +133,9 @@ void applyCssShadow(
   if (shadow == null) {
     element.style.boxShadow = 'none';
   } else {
+    // Multiply by 0.4 to make shadows less aggressive (https://github.com/flutter/flutter/issues/52734)
+    final double alpha = 0.4 * color.alpha / 255;
     element.style.boxShadow = '${shadow.offset.dx}px ${shadow.offset.dy}px '
-        '${shadow.blurWidth}px 0px rgb(${color.red}, ${color.green}, ${color.blue})';
+        '${shadow.blurWidth}px 0px rgba(${color.red}, ${color.green}, ${color.blue}, $alpha)';
   }
 }
diff --git a/lib/web_ui/lib/src/engine/util.dart b/lib/web_ui/lib/src/engine/util.dart
index e0d69b68bfbaa..54a03397de936 100644
--- a/lib/web_ui/lib/src/engine/util.dart
+++ b/lib/web_ui/lib/src/engine/util.dart
@@ -349,6 +349,16 @@ String _colorToCssStringRgbOnly(ui.Color color) {
   return '#${paddedValue.substring(paddedValue.length - 6)}';
 }
 
+/// Converts color components to a CSS compatible attribute value.
+String colorComponentsToCssString(int r, int g, int b, int a) {
+  if (a == 255) {
+    return 'rgb($r,$g,$b)';
+  } else {
+    final double alphaRatio = a / 255;
+    return 'rgba($r,$g,$b,${alphaRatio.toStringAsFixed(2)})';
+  }
+}
+
 /// Determines if the (dynamic) exception passed in is a NS_ERROR_FAILURE
 /// (from Firefox).
 ///
diff --git a/lib/web_ui/test/golden_tests/engine/shadow_golden_test.dart b/lib/web_ui/test/golden_tests/engine/shadow_golden_test.dart
index d5f3dc8388e7c..35651a42276e8 100644
--- a/lib/web_ui/test/golden_tests/engine/shadow_golden_test.dart
+++ b/lib/web_ui/test/golden_tests/engine/shadow_golden_test.dart
@@ -12,7 +12,7 @@ import 'package:web_engine_tester/golden_tester.dart';
 
 import 'scuba.dart';
 
-const Color _kShadowColor = Color.fromARGB(255, 255, 0, 0);
+const Color _kShadowColor = Color.fromARGB(255, 0, 0, 0);
 
 void main() async {
   final Rect region = Rect.fromLTWH(0, 0, 550, 300);