Градиент для текста

Чтобы применить градиентную заливку цвета для текста, сперва нужно сделать градиент для фона:

.text-gradient {
  // color: linear-gradient(to right, #e30e3c, #028e4a); // так не работает
  background: linear-gradient(to right, #e30e3c, #028e4a);
}

Затем нужно обрезать фон, используя текст в качестве обтравочной маски, и скрыть этот текст:

.text-gradient {
  background: linear-gradient(to right, #e30e3c, #028e4a);
  color: transparent;
  background-clip: text;
}

Немного кроссбраузерности:

.text-gradient {
  // для старых браузеров просто цвет текста (IE11-)
  color: #028e4a;

  // для современнных бопузеров - градиент
  @supports (--css: variables) {
    background: linear-gradient(to right, #e30e3c, #028e4a);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

Такой способ позволяет применять заливку цвета градиентом для отдельных слов или нескольких строк текста. Вот пример:

See this code Text Gradients on x.xhtml.ru.

Text Gradients.