title: Layering Multiple Gradients on CSS Background
body: <p>I want to create a background with two gradients - layered atop one another.</p>
  
  <p>I created the below example, and it seems like I can't put multiple gradients together. (The example was created based on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds" rel="nofollow noreferrer">MDN-Using multiple backgrounds</a> &amp; <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gradient" rel="nofollow noreferrer">MDN-gradient</a>)</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>.radial-gradient {
    background: radial-gradient(red, yellow, rgb(30, 144, 255));
  }
  .linear-repeat {
    background: repeating-linear-gradient(45deg,
        blue, blue 5px, white 5px, white 10px);
  }
  .combined-gradient {
    background: radial-gradient(red, yellow, rgb(30, 144, 255)), 
      repeating-linear-gradient(45deg, blue, blue 5px, white 5px, white 10px);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="radial-gradient"&gt;radial gradient&lt;/div&gt;&lt;br/&gt;
  &lt;div class="radial-gradient linear-repeat"&gt;linear gradient&lt;/div&gt;&lt;br/&gt;
  &lt;div class="radial-gradient linear-repeat"&gt;combined gradient 1&lt;/div&gt;&lt;br/&gt;
  &lt;div class="combined-gradient"&gt;combined gradient 2&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Maybe the following constraint prevents layering gradients:</p>
  
  <blockquote>
    <p>Only the last background can include a background color.</p>
  </blockquote>
  
  <p>If it's not allowed to layer two gradients as a background, how should I layer them in another way?</p>