Перейти к основному содержанию
iotools.cloudiotools.cloud

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

API reference

Создавайте CSS для градиентного текста — линейный или радиальный градиент, обрезанный по контуру букв через background-clip: text (с префиксом -webkit-) и прозрачной заливкой. Скопируйте готовый класс или встроенный фрагмент.

Ввод

Показывается в предпросмотре и HTML-фрагменте. CSS-класс не зависит от этого текста.

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

Вывод

Ваш градиентный текст появится здесь.

CSS

Добавьте это в таблицу стилей и примените class="gradient-text" к элементу.

HTML (автономный)

Span со встроенными стилями — вставьте куда угодно, таблица стилей не нужна.

Это было полезно?

Другие способы использовать этот инструмент

REST API

curl -X POST https://api.iotools.cloud/v1/tool/gradient-text-css-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "sampleText": "Gradient Text",
    "fontSize": "72",
    "fontWeight": "700",
    "gradientType": "linear",
    "angle": "90",
    "color1": "#464aff",
    "position1": "0",
    "color2": "#ff6b9d",
    "position2": "100",
    "useColor3": "",
    "color3": "#ffd93d",
    "position3": "50"
  }'

Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.

Спросите у ИИ-агента

Use the IOTools `gradient-text-css-generator` tool (Gradient Text CSS Generator) on this input:

YOUR_INPUT_HERE

Вставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.

Виджет для встраивания

<iframe
  src="https://iotools.cloud/embed/gradient-text-css-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Генератор CSS для градиентного текста — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.

Стоимость вызова API/MCPОт 5 кредитов
Нужно больше кредитов?Посмотреть тарифы

Также доступно через

ИнтеграцииРасширение для браузераРасширение для VS Code

Руководства

Градиентный текст делает обычные заголовки броскими: цветовой градиент наносится прямо на буквы, а не заливается сплошным цветом. Этот Генератор CSS для градиентного текста создаёт точный CSS за вас: выберите цвета, направление, размер и толщину, посмотрите предпросмотр, который обновляется на лету, и скопируйте готовый класс или автономный встроенный фрагмент.

Как работает градиентный текст

Эффект основан на одной удачной комбинации CSS-свойств. Вы задаёте градиент как background-image элемента, обрезаете этот фон по форме букв с помощью background-clip: text, а затем делаете заливку текста прозрачной, чтобы градиент проступил сквозь него:

.gradient-text {
  background-image: linear-gradient(90deg, #464aff 0%, #ff6b9d 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

Строки -webkit-background-clip и -webkit-text-fill-color нужны для широкой поддержки браузерами: Chrome, Safari и другим браузерам на WebKit/Blink требуются версии с префиксом, и этот генератор всегда их включает, чтобы текст отображался везде.

Использование генератора

  1. Введите пример текста, чтобы увидеть его в предпросмотре.
  2. Выберите тип градиента — линейный для прямого перехода через буквы или радиальный для свечения, расходящегося от центра.
  3. Задайте угол (для линейного градиента), чтобы управлять направлением перехода: от 0deg (снизу вверх) до 90deg (слева направо).
  4. Добавьте цветовые точки. По умолчанию включены два цвета; отметьте «Добавить третью цветовую точку» для более богатого многоцветного перехода. У каждой точки есть позиция от 0% до 100%.
  5. Настройте размер и толщину шрифта, чтобы они соответствовали заголовку, который вы оформляете.

Инструмент выдаёт две вещи: CSS-класс .gradient-text для вашей таблицы стилей и автономный HTML-фрагмент span со встроенными стилями — удобно для email-шаблонов, блоков CMS и любых мест, где нельзя подключить таблицу стилей.

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

Поскольку фон обрезан по тексту, элементу нужен display: inline-block (или block), чтобы обрезка правильно рассчитывалась — этот генератор добавляет его автоматически. Если нижние выносные элементы букв обрезаются, добавьте немного line-height или padding к элементу.

Доступен ли градиентный текст?

Градиенты могут снижать контраст, поэтому убедитесь, что самый тёмный цвет в переходе читается на вашем фоне, и используйте эффект для крупных заголовков, а не для основного текста. Программы чтения с экрана читают базовый текст как обычно, так что семантических недостатков нет.

Отправляется ли мой текст куда-либо?

Нет. CSS генерируется полностью в вашем браузере — ничего не загружается, и инструмент работает офлайн после загрузки страницы.

cssgradienttextgeneratorbackground-cliptypographyweb design

Нравятся инструменты? Уберите рекламу.

Один платёж навсегда убирает всю рекламу с вашего аккаунта. Без подписки, без слежки.

Убрать рекламу