title: How to get a blurred CSS3 Gradient
body: <p>How do I get a blurred CSS3 gradient in Safari? Gradient I'm using doesn't look well, It looks stripped instead of blurred. It looks very nice in Firefox though. I hope I explain fine. <img src="https://i.stack.imgur.com/qtFeM.png" alt="enter code here"></p>
  
  <p>There it is an image (safari left, firefox right). The line in the middle is my wallpaper.</p>
  
  <p><img src="https://i.stack.imgur.com/Vr5i5.jpg" alt="Again another "></p>
  
  <p>Again another image from safari. Here is clearer the strips. (They are with different colors, cuz are from different pages, but the same code)</p>
  
  <pre><code>  background: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(0,0,0,0.45) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(0,0,0,0.45))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(0,0,0,0.45) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(0,0,0,0.45) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(0,0,0,0.45) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(0,0,0,0.45) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#73000000',GradientType=0 ); /* IE6-9 */
  </code></pre>