CSS box-shadow is different from Firefox and Chromium

Question

I am thinking about relying on box-shadow , but it is different in different ways even on Firefox and Chrome / Chromium. The difference is very subtle with low values, but very noticeable with large ones.

In this example , you can see that differences occur when using negative values ​​to reduce the shadow. The left render is Chromium 25, and the right render is Firefox 21.

HTML:

 <div> Hello there! </div> 

CSS

 div{ margin:100px; padding:100px; border:1px solid red; box-shadow:0 80px 15px -85px #000; } 

How can I solve this problem? Or maybe now I should abandon box-shadow ?

Answer 1

Browsers use different algorithms to generate blurring of the shadow picture, in Chrome the opacity of shadow pixels decreases faster from the inner edge of the shadow region to the outer one, and since the inner 1/3 of the shadow is hidden under the box in this example, it looks like it has a different start color. If we make the blur completely visible, reducing the blur radius and negative propagation distance by 5 pixels and replacing the shadow color with translucent rgba (), the rendering difference will become significantly less significant ( demo ).

Answer 2

Try using the -moz-box-shadow property for firefox, it will look better.

 div{ margin:100px; padding:100px; border:1px solid red; -moz-box-shadow: 0 80px 15px -85px #000; box-shadow:0 80px 15px -85px #000; }