Чтобы создать градиент для текста в HTML с поддержкой браузеров Webkit, нужно: 13

1. Применить базовый фон к тегу body и выровнять текст по центру страницы. 3
2. Сделать несколько базовых стилизаций, например, установить размер шрифта и семейство. 3
3. Применить свойство линейного градиента к любым цветам по выбору. 3
4. Применить свойства Webkit: первое сделает весь градиентный фон прозрачным, а второе заполнит текст градиентным фоном. 3

Пример кода: 2

h1 {  font-family: Roboto, Arial, sans-serif;  font-size: 10vmax;  background-color: #2AA5A0;  background-image: linear-gradient(90deg, #E3535D, #2AA5A0);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;}

Свойство -webkit-background-clip: text оставляет градиент только под текстом, а -webkit-text-fill-color: transparent делает цвет текста прозрачным. 2

Пользоваться свойством -webkit-text-fill-color нужно с осторожностью, так как это нестандартное свойство, поведение которого может измениться в будущем. 2