Информация [CSS] Урок 6: Текст с градиентом.

[Николай Винсент]

Как сделать текст с градиентом?
Цели урока:

• Научиться делать текст с градиентом с помощью CSS

Итак, начнем!
Что бы сделать текст градиентом, как CSS класс, надо использовать правила -webkit-background-clip и -webkit-text-fill-color, для самого цвета, используем background: linear-gradient()
Для настройки -webkit-background-clip ставим настройку text, а для -webkit-text-fill-color – transparent. Для background: linear-gradient() Устанавливаем свои настройки.
Перейдем к коду!
Ниже, указан код для текста-градиента цвета темно-зеленый – голубой.

.gradient {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(to right, rgb(0, 127, 0) 0%, rgb(0, 255, 255) 100%);
}

Выглядит:
Добавим немного практики:
Попробуйте сделать текст с градиентом сине-фиолетового цвета.
Автор урока: Николай Винсент