title: CSS3 Radial Gradients with RGBA()
body: <p>I am working on a website which uses multiple css3 gradients as overlay for a background tiled with texture image</p>
  
  <p>site url: <em>--snipped--</em></p>
  
  <p>currently for header i am using following css:</p>
  
  <pre><code>#header {
   background: #DBD6D3;
   height: 364px;
   background: -moz-radial-gradient(50% 0% 0deg,circle farthest-corner,#FFFFFF,#DBD6D3);
   background: -webkit-gradient(radial,50% 59,500,50% 0,40,from(#DBD6D3),to(#FFFFFF));
  }
  
  #header .wrp{background:url('img/headerBg.png');height:100%;padding-top:40px;}
  </code></pre>
  
  <p>here headerBg.png is a semi-transparent texture of size 5x5 pixel, ad for body I need to create this background:
  <img src="https://i.stack.imgur.com/GTFu7.jpg" alt="alt text"></p>
  
  <p>I need to know how to make this kind of radial background in CSS3, initially I had used same code as header but with rgba() for color, setting end of the gradient with 0 opacity but it created too much noise.</p>
  
  <p>tried few online generators as well for CSS3 radial background but none of them were good!</p>
  
  <p>This image i am using is taking up 280kbs and I want to reduce it as it significantly effects the performance! Help would be appreciated.</p>
  
  <p>update:</p>
  
  <p>Upload psd, can be downloaded from
  <a href="http://ylspeaks.com/stackoverflow_css3.zip" rel="noreferrer">http://ylspeaks.com/stackoverflow_css3.zip</a></p>
  
  <p>and adding bounty</p>