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

4 года назад

Человек-Молекула

Присоединяйтесь к нашему Telegram-сообществу

Ответы

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

2 года назад

Kiryl Kurtsou

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

Исходный 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;
}

3 года назад

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

1 месяц

Позиционирование в CSS

Навык разработки адаптивных интерфейсов, позволяющий создавать удобные и функциональные решения для различных устройств

5 месяцев

Профессиональная верстка

Навык адаптивной вёрстки с современными подходами для корректного отображения сайтов на любых устройствах и разрешениях

1 месяц

Анимация CSS

Навык создания анимаций в CSS для улучшения пользовательского опыта и повышения востребованности на рынке

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

1 месяц

Основы веб-разработки

Основы HTML, CSS, блочная модель, основы Javascript, синтаксис, арифметика, условия, циклы, функции, поиск ошибок

Похожие вопросы