title: How to apply multiple css radial gradients to a single element
body: <p>I have the following style applied to my <code>div</code> element:</p>
  
  <pre><code>background-image: -moz-radial-gradient(50% -10%, ellipse closest-corner, rgba(5, 5, 5, 0.7), rgba(0, 0, 0, 0) 100%);
  </code></pre>
  
  <p>This has the desired effect (being an inner drop shadow only at the top of the <code>div</code>). I would like to apply the same effect at the bottom of the <code>div</code>. The following line does it well, but it seems to override the first, so I can only get one or the other.</p>
  
  <pre><code>background-image: -moz-radial-gradient(50% 110%, ellipse closest-corner, rgba(5, 5, 5, 0.7), rgba(0, 0, 0, 0) 100%);
  </code></pre>
  
  <p>Can someone show me how I can have multiple radial gradient backgrounds per element? I notice that webkit can do this easily, but I'm looking for a cross browser implementation/alternative.</p>
  
  <p>Thanks</p>