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

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


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.