Как задать цвет текста градиентом, используя CSS

В CSS нельзя задать цвет текста градиентом, но можно прибегнуть к одной уловке и вырезать текст из фона, для этого пропишем для блока с текстом следующие свойства в CSS

.gradient-text{
    background: linear-gradient(to bottom right, #39dfa5, #1fbdf2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

Сам текст сделаем прозрачным, а с помощью свойства background-clip обрежем фон по тексту, вот и все, получается довольно занятный эффект.