Как сделать градиент текста в css
Ответы
Kiryl Kurtsou
23 декабря 2023
.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.
0
0
Вячеслав Межуревский
11 октября 2022
Для создания текстовых заголовков можно использовать градиент, который будет отображаться исключительно внутри букв. Рассмотрим один из способов как это можно сделать:
Исходный 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;
}
0
0