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.