title: Liner gradient on left, center and right
body: <p>I am trying to learn how to use linear gradient but am still not getting the syntax 100% as you can see in my code:</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>#grad1 {
      height: 55px;
      background: -webkit-linear-gradient(left, #000, #ed1c24); /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(left, #000, #ed1c24); /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(left, #00, #ed1c24); /* For Fx 3.6 to 15 */
      background: linear-gradient(to right, #000, #ed1c24); /* Standard syntax (must be last) */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold"&gt;
  Gradient Background
  &lt;/div&gt;
  
  &lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt; Internet Explorer 9 and earlier versions do not support gradients.&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I use the gradient so that I have the black on the left fading to red in the center and then fading again to red on the right?</p>
  
  <p>For now I could do on the left and the center but am struggling to put on the right as well.</p>
  
  <p>Hope you can help</p>