title: possible to create 3D lighting effect with CSS?
body: <p>Here's an image I'd like to recreate with HTML/CSS:</p>
  
  <p><img src="https://i.stack.imgur.com/IBf7o.png" alt="enter image description here"></p>
  
  <p>The center gradient is easy enough, as are the two rings (a border around the center, and a div around that div that has its own border). The outside shadow on the left seems simple enough as well.</p>
  
  <p>Here's my best approximation so far (<a href="http://jsfiddle.net/forgetcolor/jwPa3/" rel="noreferrer">with a matching fiddle</a>):</p>
  
  <pre><code>  &lt;div id="youedge"&gt;
      &lt;div id="youlight" class="round border radialgradientbg"&gt;                
      &lt;/div&gt;
    &lt;/div&gt;
  
  #youedge {
      border:30px solid #888;
      border-radius:190px;
      width:190px;height:190px;margin:50px;
      box-shadow:-30px 0 0 #555;
  }
  
      #youlight { width:150px; height:150px; background-color:#2b0c0f; }
      .round { border-radius:190px; }
      .border { border:20px solid #777; }
      body { background-color:#999; }
  
      .radialgradientbg {
      background: -moz-radial-gradient(center, ellipse cover,  #4c1113 0%, #16040a 100%); /* FF3.6+ */
      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#4c1113), color-stop(100%,#16040a)); /* Chrome,Safari4+ */
      background: -webkit-radial-gradient(center, ellipse cover,  #4c1113 0%,#16040a 100%); /* Chrome10+,Safari5.1+ */
      } 
  </code></pre>
  
  <p>What I can't figure out is the 3D lighting effects on the two gray borders around the center. Is there a way to accomplish this in CSS?</p>