Как сделать градиент текста в css

.banner__title { font-family: Roboto; font-size: 48px; font-weight: 700; background-color: #CE0094; background-image: linear-gradient(92deg, #003ACE, #CE0094); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

Не срабатывает. Класс верный. Проверял на Chrome.

Для создания текстовых заголовков можно использовать градиент, который будет отображаться исключительно внутри букв. Рассмотрим один из способов как это можно сделать:

Исходный HTML файл:

<h1>Используем градиент для текста</h1>

Стили

h1 {
  /* настройки самого шрифта, размер, начертание, верхний регистр всех символов */
  font-size: 100px;
  font-weigth: bold;
  font-family: sans-serif;
  text-transform: uppercase;
  /* линейный градиент, слева на право, 3 цвета */
  background-image: linear-gradient(to right, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  /* обрезаем фон по тексту */
  -webkit-background-clip: text;
  /* меняет цвет текста заголовка на прозрачный что бы можно было увидеть градиент*/
  -webkit-text-fill-color: transparent;
}

Градиент на тексте делают так: задают градиентный фон и обрезают его по форме букв.

.title {
  background: linear-gradient(90deg, #0082ff, #ce0094);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Что делает каждая строка:

• background — градиент на весь блок;
• background-clip: text — фон виден только внутри букв;
• color: transparent — сам текст прозрачный, сквозь него виден фон.

Свойство с префиксом -webkit- нужно для Safari и старых версий Chrome.

Градиент только под длину текста

Заголовок — блочный элемент, и градиент растягивается на всю ширину строки. Если текст короткий, видна только начальная часть градиента. Ограничьте ширину блока по тексту:

.title {
  display: inline-block;
}

Другие виды градиента

/* по диагонали */
background: linear-gradient(135deg, #f97316, #ec4899);

/* три цвета */
background: linear-gradient(90deg, #22c55e, #0082ff, #a855f7);

/* круговой */
background: radial-gradient(circle, #facc15, #ef4444);

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

.title {
  background: linear-gradient(90deg, #0082ff, #ce0094, #0082ff);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 3s linear infinite;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

Если градиент не виден

• Текст залит одним цветом — не указан color: transparent.
• Виден прямоугольник градиента — не сработал background-clip: text, добавьте вариант с -webkit-.
• При выделении текст пропадает — это особенность приёма. Цвет выделения задают через ::selection.

Оформление текста и фоны разбирают в курсе «Профессиональная вёрстка».