Skip to main content

Генератор градиентного CSS-текста

Генерация CSS-кода для применения градиентов к тексту. Предпросмотр цветов, направления и диапазона в реальном времени.

Gradient Text
0%
100%
.gradient-text {
  background: linear-gradient(to right, #ec4899 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 48px;
  font-weight: 700;
}
Поделиться
📖

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

Step 1

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

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

Введите текст, к которому нужно применить градиент

Step 2

Настройте градиент

Настройте градиент

Настройте цвета, направление, тип градиента и т.д.

Step 3

Скопируйте CSS

Скопируйте CSS

Скопируйте сгенерированный CSS-код

Возможности

Предпросмотр в реальном времени

Предпросмотр градиентного текста в реальном времени

Различные градиенты

Поддержка линейных, радиальных, конических градиентов с несколькими точками цвета

Готовые пресеты

Применение популярных градиентных пресетов одним нажатием

FAQ

Техника CSS с использованием background-clip: text для применения градиентного фона к тексту.

🔗Похожие инструменты

🎨
Инструменты для дизайна

Конвертер цветовых кодов

Конвертация между цветовыми кодами HEX, RGB и HSL. Используйте палитру цветов и предпросмотр в реальном времени для интуитивного выбора цвета.

🎨
Инструменты для дизайна

Палитра цветов

Выбирайте цвета с помощью цветового колеса и ползунков. Получайте и копируйте цветовые коды в форматах HEX, RGB и HSL.

🎨
Инструменты для дизайна

Извлечение цветов из изображения

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

🎯
Инструменты для дизайна

Определение среднего цвета изображения

Вычисление среднего цвета всего изображения или выделенной области. Полезно для подбора цветовых схем или фоновых цветов миниатюр.

🌈
Инструменты для дизайна

Генератор CSS-градиентов

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

🔲
Инструменты для дизайна

Генератор CSS Box Shadow

Визуально создавайте CSS box-shadow с помощью ползунков. Поддержка нескольких теней и внутренних теней.