title: CSS - linear gradient not working in any browser
body: <p>I've a <code>class</code> as:</p>
  
  <pre><code>.breadcrumb_area {
    background-image: -moz-linear-gradient(180deg, #5e2ced 0%, #a485fd 100%);
    background-image: -webkit-linear-gradient(180deg, #5e2ced 0%, #a485fd 100%);
    background-image: -ms-linear-gradient(180deg, #5e2ced 0%, #a485fd 100%);
    position: relative;
    z-index: 1;
    padding: 235px 0px 125px;
    overflow: hidden;
  }
  </code></pre>
  
  <p>Now, I am using predefined html css template. This class works fine in template pages. But the same class when I use in <code>react</code> page, it's not working.</p>
  
  <p>In chrome developer tools the line <code>background-image</code> has been strike through.</p>
  
  <pre><code>&lt;section className="breadcrumb_area"&gt;
          &lt;img className="breadcrumb_shap" src={`${banner_bg}`} alt="" /&gt;
          &lt;div className="container"&gt;
              &lt;div className="breadcrumb_content text-center"&gt;
                  &lt;h1 className="f_p f_700 f_size_50 w_color l_height50 mb_20"&gt;Services&lt;/h1&gt;
                  &lt;p className="f_300 w_color f_size_16 l_height26"&gt;
                    Why I say old chap that is spiffing off his nut arse pear shaped plastered&lt;br/&gt; 
                    Jeffrey bodge barney some dodgy.!!
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>The same thing works <a href="https://jsfiddle.net/akcu4htz/1/" rel="nofollow noreferrer">here as well</a></p>
  
  <p><strong>How do I use linear-gradient for all the browsers ?</strong></p>