Как сделать градиент текста в css

.banner__title { font-family: Roboto; font-size: 48px; font-weight: 700; background-color: #CE0094; background-image: linear-gradient(92deg, #003ACE, #CE0094); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

Не срабатывает. Класс верный. Проверял на Chrome.

Для создания текстовых заголовков можно использовать градиент, который будет отображаться исключительно внутри букв. Рассмотрим один из способов как это можно сделать:

Исходный HTML файл:

<h1>Используем градиент для текста</h1> 

Стили

h1 {
  /* настройки самого шрифта, размер, начертание, верхний регистр всех символов */
  font-size: 100px;
  font-weigth: bold;
  font-family: sans-serif;
  text-transform: uppercase;
  /* линейный градиент, слева на право, 3 цвета */
  background-image: linear-gradient(to right, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  /* обрезаем фон по тексту */
  -webkit-background-clip: text;
  /* меняет цвет текста заголовка на прозрачный что бы можно было увидеть градиент*/
  -webkit-text-fill-color: transparent;
}