Different output for same box-shadow size in Chrom

Question

Why size of box-shadow in Chrome and Firefox are different?

box-shadow: 0 0 4px #aaa inset;

Chrome:

Firefox:

I've already try the following but it's not working in latest Firefox.

-moz-box-shadow: 0 0 2px #aaa inset;
-webkit-box-shadow: 0 0 4px #aaa inset;

How can I have cross browser box shadows in a same size?

Answer 1

I'm faced the same problem.
Try to think that all browsers have the bigger shadow and only the webkit have smaller.
So solution is:

box-shadow: 0 0 2px #aaa inset; /* for all browsers */
-moz-box-shadow: 0 0 2px #aaa inset; /* for old firefox */
-webkit-box-shadow: 0 0 4px #aaa inset; /* override for Chrome & Safari */

Hopefully Chrome and Safari will continue to support -webkit-box-shadow.

Answer 2

w3schools says there are 6 values to box shadow:

box-shadow: h-shadow v-shadow blur spread color inset;

Blur and spread are optional and my guess is that as you only defined three values before the colour, the 2 browsers were interpreting differently.

I got them to look the same (to my eye at least) with the following on js fiddle:

-moz-box-shadow: 0px 0px 3px 0px #aaa inset;
-webkit-box-shadow: 0px 0px 5px 0px #aaa inset;

Hope this helps

Answer 3

Firefox and Chrome use different renderers, and there's no easy way around it. As -moz-box-shadow no longer works, you need a different way to write a FF-only style:

.myThing {
    box-shadow: 0 0 4px #aaa inset;
}
@-moz-document url-prefix() { 
    .myThing {
        box-shadow: 0 0 2px #aaa inset;
    }
}

See also this answer.

Answer 4

Shadows are different because Chrome is buggy since many years: https://bugs.chromium.org/p/chromium/issues/detail?id=179006

This is expected to be fixed in Chrome 73 (March 2019): https://www.chromestatus.com/feature/6569666117894144

The simplest thing you can do for cross browser shadows is just to create it with Firefox or Safari. Chrome 73 and later will display it correct.

Please don't use prefix-hacks for box-shadow. Box-shadow is unprefixed in all browsers since 2011.