Different output for same box-shadow size in Chrome and Firefox

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

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 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