Генератор градиентного текста CSS
Введите свой текст, выберите градиент и скопируйте CSS для заголовка или надписи.
Как пользоваться
Выберите основу в галерее, введите текст и настройте размер и насыщенность шрифта. Меняйте цвета и позиции точек, тип градиента, направление и слои так же, как в генераторе градиентов.
Скопируйте CSS в правило своего элемента, например .gradient-text. Текст задайте в HTML. Фон предпросмотра не попадает в CSS. Ссылка сохраняет текст и все настройки; сброс возвращает исходный пример.
Как градиент окрашивает буквы
background-image задаёт градиент, background-clip: text ограничивает фон контурами букв, а прозрачный цвет текста открывает заливку. Градиент распределяется по всему элементу, включая многострочный текст. Шрифт наследуется от вашей страницы, поэтому форма и ширина букв могут отличаться.
Галерея градиентов
Выберите основу и доработайте её в настройках.
Предпросмотр
Настройка текста
Настройка градиента
Слои накладываются друг на друга: первый лежит сверху, а его прозрачные участки открывают нижние.
Готовый CSS
Для настройки градиента включите JavaScript. Ниже — пример линейного градиента.
.gradient-text
background-image: linear-gradient(135deg, #7367f0 0%, #35c9c1 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
display: inline-block;
font-size: 64px;
font-weight: 800;
line-height: 1.2;
white-space: pre-wrap;
overflow-wrap: anywhere;Также попробуйте генератор тени текста и генератор градиентов.