title: gradient is being applied to background instead of text in IE and Firefox
body: <p>I've got a CSS gradient set up for some text on a webpage. It works fine for Chrome and Safari but isn't getting applied correctly for IE10, IE11 or Firefox. In those browsers the gradient is getting applied as a background color rather than as a gradient to the text itself.</p>
  <pre><code>.originals h3, .gradient-text {
      color: #00A3B8;
      font-size: 2em;
      font-weight: 800;
      /* Newer Browsers */
      background: linear-gradient(330deg, #00e1ff 0%, #ffeb50 100%);
      /* Opera 11.10+ */
      background: -o-linear-gradient(330deg, #00e1ff 0%, #ffeb50 100%);
      /* Firefox 3.6+ */
      background: -moz-linear-gradient(330deg, #00e1ff 0%, #ffeb50 100%);
      /* Chrome 7+ &amp; Safari 5.03+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00e1ff), color-stop(1, #ffeb50));
      /* IE10+ */
      background: -ms-linear-gradient(330deg, #00e1ff 0%, #ffeb50 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-align: center;
      width: 80%;
      margin: 0 auto;
      padding: 0;
  }
  </code></pre>
  <p>Here's what it looks like in</p>
  <blockquote>
  <p>Chrome:<a href="https://imgur.com/q8RshaI" rel="nofollow noreferrer">Link</a></p>
  <p>IE:<a href="https://imgur.com/UblJaf4" rel="nofollow noreferrer">Link</a></p>
  <p>Firefox:<a href="https://imgur.com/GZRwOWq" rel="nofollow noreferrer">Link</a></p>
  </blockquote>
  <p>Can someone please point out what I'm doing wrong for those browsers? Any help given is greatly appreciated!</p>
  <p><strong>Updated:</strong> Here's the HTML that the gradient is being applied to:</p>
  <pre><code>&lt;div class=&quot;originals&quot;&gt;
      &lt;div class=&quot;wrapper&quot;&gt;
          &lt;h3 class=&quot;gradient-text&quot;&gt;We make, design, engineer, create, illuminate, record, capture, code, program, open, decide, speak, blend, paint, construct, launch, markup, ignite, form, defend, ink.&lt;/h3&gt;
          &lt;img src=&quot;/img/myLogo.png&quot; alt=&quot;logo&quot; /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>