title: Patterned gradients in modern browsers
body: <p>I get more and more complaints regarding badly rendered gradients (CSS, Canvas, <em>and</em> SVG).</p>
  
  <p>As it highly depends on the browser and OS. I can't propose a global MCVE. So I'll focus on this simple CSS gradient which is badly rendered on Chrome/Ubuntu (vertical stripes):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      background: linear-gradient(90deg, #111, #444);
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Of course I'd be interested in a solution for this specific case. But I'd value more a general solution to get smooth monotonous gradients. Canvas or image based solutions are not acceptable as my gradients are in great number, dynamic, and usually partially transparent.</p>