Четыре строки, по порядку
background: linear-gradient(135deg, #F5A63D 0%, #A8340F 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
Градиент рисуется как фон элемента, фон обрезается по глифам, а сами глифы делаются прозрачными, чтобы фон просвечивал. Поменяйте первые две строки местами — сломается, см. вопросы.
Какой вид градиента
Линейный — обычный выбор для заголовков: диагональ от одного фирменного цвета к другому. Радиальный даёт свечение в середине слова, конический — радужный разворот. Переключатель вида выше меняет только градиент; строки clip во всех случаях одинаковые.
Где ломается
- Закрашен весь блок — строка clip раньше строки background. Переставьте.
- В Safari ничего не видно — нет
-webkit-background-clip. - Текст остался чёрным — нет
color: transparent. - Градиент на всю строку, а не на слово — элемент
display: block; сделайтеinline-block.
Для обычного фона, а не текста — генератор градиентов с тем же форматом ссылки: цвета переносятся.
Считается на вашем устройстве
Превью — ваш браузер рендерит тот же CSS, что вы копируете. Ничего не загружается.
Вопросы
Почему вместо градиентного текста получается закрашенный блок?+
Потому что `background` — сокращённое свойство, и оно сбрасывает `background-clip`. Если строка с clip стоит раньше строки с background, побеждает background и закрашивает весь блок. Порядок, который выдаёт инструмент — сначала background, потом две строки clip, потом прозрачный цвет, — рабочий.
Префикс -webkit- ещё нужен?+
Для Safari — да. Без префикса `background-clip: text` работает в Chrome и Firefox; Safari нужен `-webkit-background-clip: text`, и выдаются обе строки, чтобы работало везде. Оставляйте обе.
Градиент обрезан по тексту, но текст по-прежнему старого цвета.+
Цвет текста должен быть прозрачным, чтобы фон просвечивал: `color: transparent`. В некоторых руководствах используют `-webkit-text-fill-color: transparent`; работает и то и другое, `color` — стандартный вариант.
Такой текст выделяется и читается скринридером?+
Да — это настоящий текст, не картинка. Выделение выглядит странно из-за прозрачности, но копирование, поиск и доступность работают как обычно. Ради этого и делают на CSS.
Работает на ссылке или кнопке?+
На любом строчном или блочном тексте. Применяйте к элементу, в котором только текст; если у него есть отступы или рамка, сделайте `display: inline-block`, чтобы градиент лёг на слово, а не на всю строку.