http://jsfiddle.net/xqnkU/

.shadow { position: absolute; box-shadow: 0 0 200px black; width: 157px; height: 113px; border-radius: 130px; background-color: rgba(0, 0, 0, 0.2); left: 40px; top: 40px; } 
 <div class="shadow"></div>

How to make the shadow render equally the same, this is no good.

    2 answers 2

    I decided to use media-query for ff

     @-moz-document url-prefix() { .box:hover { box-shadow(0px 1px 3px rgba(0,0,0,0.3), inset 0px 4px 2px -2px rgba(255,255,255,0.7), inset 0px -3px 1px -2px rgba(0,0,0,0.3), inset 0px -20px 130px -120px rgba(0,0,0,0.9)); } }

      Doesn't -moz-box-shadow work?