Создавайте красивый текстовый градиент CSS без особых усилий

Создавайте потрясающие градиентные текстовые эффекты для вашего сайта

Управление градиентом

Градиентный текст CSS
.gradient-text { background: linear-gradient(to right, #4F46E5, #EC4899); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

Популярные градиенты

Sunset
linear-gradient(to right, #FF512F, #F09819)
Magic
linear-gradient(to right, #4158D0, #C850C0, #FFCC70)
Ocean
linear-gradient(to right, #0093E9, #80D0C7)
Electric
linear-gradient(to right, #30CFD0, #330867)
Фруктовый салат
linear-gradient(to right, #FA709A, #FEE140)
Neon Glow
linear-gradient(to right, #00DBDE, #FC00FF)

Как пользоваться

1

Введите свой текст

Введите текст, к которому вы хотите применить градиент, в поле ввода «Текст».

2

Выберите тип градиента

Выберите один из типов линейного, радиального или конического градиента.

3

Настройка направления или угла

Для линейных градиентов выберите направление. Для конических градиентов задайте угол.

4

Настройка цветов

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

5

Скопировать или сохранить CSS

Скопируйте сгенерированный CSS-код или сохраните его в виде CSS-файла для использования в своих проектах.

Сведения о градиентах текста

Текстовые градиенты CSS позволяют применять красивые разноцветные градиенты непосредственно к тексту. Когда-то такой эффект был возможен только с изображениями, но современный CSS делает его простым и эффективным.

Поддержка браузеров:Текстовые градиенты поддерживаются во всех современных браузерах, включая Chrome, Firefox, Safari и Edge. В старых браузерах, таких как Internet Explorer, текст будет иметь сплошной цвет.

Советы по использованию:Текстовые градиенты лучше всего работают с жирным текстом и высококонтрастными цветовыми сочетаниями. Экспериментируйте с различными типами градиентов и направлениями, чтобы добиться желаемого эффекта.

Related Tools

Создавайте идеальные макеты флексбоксов

Визуализируйте, настраивайте и генерируйте код флекбокса CSS с помощью нашего интуитивно понятного интерфейса перетаскивания.

Конвертер стилуса в CSS

Преобразуйте свой код SCSS в CSS. Быстро, просто и безопасно.

Конвертер SCSS в CSS

Преобразуйте свой код SCSS в CSS. Быстро, просто и безопасно.

CMYK в PANTONE

Преобразование значений цветов CMYK в ближайшие эквиваленты Pantone® для дизайна печати

Калькулятор маржи

Рассчитайте маржу прибыли, валовую маржу и наценку с помощью нашего комплексного калькулятора маржи.

SHA3-256 Калькулятор хеша

Быстрая и простая генерация хэшей SHA3-256