Создавайте красивый текстовый градиент 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 Beautifier

Форматируйте и украшайте свой CSS-код с профессиональной точностью

Простое создание преобразований CSS3

Мощный, интуитивно понятный инструмент для создания сложных преобразований CSS3 без написания кода. Визуализируйте изменения в режиме реального времени и копируйте сгенерированный CSS для использования в своих проектах.

Минификатор CSS

Сжимайте и оптимизируйте свой CSS-код с профессиональной точностью

HSV в RGB

Преобразование цветовых кодов HSV в значения RGB для веб-разработки

HTML Beautifier

Форматируйте и украшайте свой HTML-код с профессиональной точностью

От восьмеричной к десятичной дроби

Преобразуйте восьмеричные числа в десятичные без особых усилий