title: CSS gradient: define width in pixels
body: <p>Please take a look at this fiddle: <a href="http://jsfiddle.net/jpftqc26/" rel="noreferrer">http://jsfiddle.net/jpftqc26/</a></p>
  
  <p>A CSS gradient, starts black from left, turns into red, then back to black again. Really simple.</p>
  
  <p>Is there any way I can make the red part 500px wide and the black parts fill the screen, whatever the resolution? With red in the middle, just like in the fiddle.</p>
  
  <p><strong>Is there a way do define a width in pixels, between color stops, in a CSS gradient?</strong></p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>.test_gradient {
  background: 
  linear-gradient(
        to right, 
        #000000,
        #000000 20%,
        #ff0000 20%,
        #ff0000 80%,
        #000000 80%
      );
  </code></pre>