Чтобы создать текст с градиентной окраской можно использовать CSS-свойство background-clip.

h2 {
    background: linear-gradient(45deg, gold, lightblue);
    background-clip: text;
    text-fill-color: transparent;
}

Но решить проблему кроссбраузерности поможет элемент svg, позволяющий достичь тот же результат и обеспечивающий максимальную совеместимость с различными браузерами.

<svg width="100%" height="100%">
  <defs>
    <linearGradient id="Gradient" x1="0" x2="1" y1="0" y2="0">
      <stop offset="0%" stop-color="orange">
      <stop offset="100%" stop-color="purple">
    </linearGradient>
  </defs>

  <text x="50%" y="50%" font-family="Verdana" font-size="35" text-anchor="middle" fill="url(#Gradient)">
    Gradient Text
  </text>
</svg>

Дополнительная информация на MDN

Спасибо за внимание.