title: css multiple gradients with colour stops
body: <p>I have created a simple css bar with colour stops using the following:</p>
  
  <pre><code>#testing{
    width:100%;
    height:40px;
     background-image: -webkit-linear-gradient(left, #034a96 80%, #eab92d 50%);  
      background-image: -moz-linear-gradient(top, #034a96 50%, #eab92d 51%);  
      background-image: -ms-linear-gradient(top, #034a96 50%, #eab92d 51%);  
      background-image: -o-linear-gradient(top, #034a96 50%, #eab92d 51%);  
      background-image: linear-gradient(top, #034a96 50%, #eab92d 51%); 
        -webkit-border-radius: 15px;
       -moz-border-radius: 15px;
            border-radius: 15px;
  }
  </code></pre>
  
  <p>What I would like to do is have the first 80% of the bar is have a gradient that goes from the top with colour #034a96 to #0663c7 and then just that gradient colouring 50% of the bar. Then with the other 51% I have another gradient from the top with #eab92d to #c79810. What I'm asking is if it is possible to have multiple gradients with in each other eg:</p>
  
  <pre><code>background-image: -webkit-linear-gradient(left,  top #034a96 to #0663c7  50%, top #eab92d to #c79810 51%);
  </code></pre>
  
  <p>Or something along those lines. I hope I'm being clear with everything. Thanks in advance </p>