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

Question

Вячеслав Межуревский · Accepted Answer

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

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

``` Стили ```css 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; } ```

Kiryl Kurtsou · Answer

.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.

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

Ответы

Каталог