Demo of Flutter WEB shadows (and fonts) rendering issue

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.indigo,
      ),
      home: ShadowsExample(),
    );
  }
}

class ShadowsExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Shadows WEB issue'),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.fromLTRB(20, 30, 20, 50),
          child: Column(
            children: <Widget>[
              Text('Shadows on Web look incorrect',
                  style: TextStyle(fontSize: 20)),
              SizedBox(height: 10),
              Card(
                elevation: 0,
                margin: EdgeInsets.all(0),
                color: Colors.indigo[100],
                child: Container(
                  child: Center(child: Text('Material Card with elevation 0')),
                  height: 100,
                ),
              ),
              SizedBox(height: 20),
              Card(
                elevation: 5,
                margin: EdgeInsets.all(0),
                color: Colors.indigo[100],
                child: Container(
                  child: Center(child: Text('Material Card with elevation 5')),
                  height: 100,
                ),
              ),
              SizedBox(height: 20),
              Card(
                elevation: 10,
                margin: EdgeInsets.all(0),
                color: Colors.indigo[100],
                child: Container(
                  child: Center(child: Text('Material Card with elevation 10')),
                  height: 100,
                ),
              ),
              SizedBox(height: 20),
              Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(4),
                  boxShadow: <BoxShadow>[
                    BoxShadow(
                      color: Colors.indigo.withOpacity(0.7),
                      offset: Offset(3, 4),
                      blurRadius: 6,
                      spreadRadius: 3,
                    ),
                  ],
                ),
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(4),
                    color: Colors.indigo[100],
                  ),
                  child: Center(
                      child: Text('Container with custom BoxShadow')),
                  height: 100,
                ),
              ),
              SizedBox(height: 20),
              Text('The fonts on WEB are also fuzzier, like too much antialias'),
            ],
          ),
        ),
      ),
    );
  }
}

The above example demonstrates an issue (big difference) between Flutter WEB rendering of shadows and how they are rendered on a device.
The example can also be used to show that font rendering on Flutter WEB is very (too) fuzzy.

The WEB example can be seen in DartPad here
A screenshot comparison of WEB and Device render is attached.

Here is another comparison screenshot. The shadows on WEB (with Chrome on Win) just spread out way too much and fonts get too fuzzy. The results from Desktop on Win are OK, but there are minor differences there too, a bit more spread out shadows there too.

Just as info: This issue is a known issue and reported here: flutter/flutter#32215