Градиентный текст в CSS реализуется с помощью комбинации свойств `background`, `background-clip: text` и `-webkit-text-fill-color: transparent`. Этот подход работает во всех современных браузерах, включая Chrome, Firefox, Safari и Edge.

## Базовый пример

css
.gradient-text {
background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent; /* Фолбэк для старых браузеров */
}

html

Красивый градиентный заголовок

## Почему нужны оба префикса?

— `-webkit-background-clip: text` — необходим для Safari и старых версий Chrome.
— `background-clip: text` — стандартное свойство, поддерживаемое в Firefox 122+, Chrome 120+, Edge.
— `-webkit-text-fill-color: transparent` — скрывает исходный цвет текста, позволяя просвечивать фоновый градиент.
— `color: transparent` — резервный вариант для браузеров, не поддерживающих `-webkit-text-fill-color`.

## Виды градиентов

Можно использовать любой тип CSS-градиента:

css
/* Линейный */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Радиальный */
background: radial-gradient(circle, #f093fb, #f5576c);

/* Конический */
background: conic-gradient(from 0deg, red, yellow, green, blue, red);

## Анимированный градиентный текст

css
.animated-gradient {
background: linear-gradient(270deg, #ff0080, #7928ca, #ff0080);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradient-shift 3s linear infinite;
}

@keyframes gradient-shift {
from { background-position: 0% center; }
to { background-position: 200% center; }
}

## Важные нюансы

1. **Фоновое изображение вместо градиента**: свойство `background` принимает не только градиенты, но и `url()` — можно создавать текстурный текст.
2. **Проблема с `display: inline`**: блочные элементы работают лучше. Для строчных элементов добавьте `display: inline-block`.
3. **Доступность**: градиентный текст может снижать читаемость. Убедитесь в достаточном контрасте.
4. **Firefox до версии 122**: требовал только `-webkit-background-clip`, начиная с версии 122 поддерживает стандартное свойство.
5. **Печать**: при печати страницы градиент может не отображаться. Добавьте `@media print { color: black; }`.

## Поддержка браузерами

По данным Can I Use, `background-clip: text` поддерживается более чем в 97% современных браузеров при использовании обоих вариантов (с префиксом и без). Для максимальной совместимости всегда указывайте оба свойства.