title: CSS box-shadow renders different on Firefox and Chromium
body: <p>I'm thinking on relying on <code>box-shadow</code> but it renders differently even on Firefox and Chrome/Chromium. The difference is very subtle with low values, but very noticeable with bigger ones.</p>
  
  <p>In <a href="http://codepen.io/anon/pen/DtxAl" rel="nofollow noreferrer">this example</a>, you can see the differences arise when using negative values to make the shadow smaller. Left render is Chromium 25, right is Firefox 21.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
    Hello there!
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div{
    margin:100px;
    padding:100px;
    border:1px solid red;
    box-shadow:0 80px 15px -85px #000;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/D9O1Z.png" alt="Differences with Chromium and Firefox, first example"></p>
  
  <p>How can I workaround this problem? Or maybe I should drop <code>box-shadow</code> by now?</p>