title: How to create a "shiny" effect like this using CSS gradients?
body: <p>Is it possible to create the following using CSS only?</p>
  
  <p><img src="https://i.stack.imgur.com/u9LYr.jpg" alt="enter image description here"></p>
  
  <p>I have created the container and the rounded corners. Fiddle <a href="http://jsfiddle.net/isuru_nan/UxSdU/" rel="nofollow noreferrer">here</a>.</p>
  
  <p>But I don't know how to get the slight shiny effect. Is it possible to do this in CSS? If so how?</p>
  
  <p>Below is the code I have written so far.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="phone-outer"&gt;
      &lt;div id="phone-inner"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#phone-outer {
      margin-bottom:200px;
      margin:0 auto;  
      width:400px;
      height:500px;
      background-color:#333;
      -webkit-border-bottom-right-radius:25px;
      -webkit-border-bottom-left-radius:25px;
      -moz-border-radius-bottomright:25px;
      -moz-border-radius-bottomleft:25px;
      border-bottom-right-radius:25px;
      border-bottom-left-radius:25px;
  }
  
  #phone-inner {
      margin:0 auto;
      background-color:#FFF;
      width:360px;
      height:460px;   
  }
  </code></pre>