Генератор CSS-градиентов
Создавайте объявления CSS linear-gradient, radial-gradient или conic-gradient из набора цветовых точек — скопируйте готовый CSS в вашу таблицу стилей.
Ввод
Направление для линейных градиентов, начальный угол для конических градиентов.
Вывод
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-gradient-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"gradientType": "linear",
"angle": "90",
"color1": "#ff0000",
"position1": "0",
"color2": "#0000ff",
"position2": "100",
"useColor3": "",
"color3": "#ff6b6b",
"position3": "50"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-gradient-generator` tool (CSS Gradient Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-gradient-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 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Что это делает
Генератор CSS-градиентов преобразует тип градиента, угол и небольшой набор цветовых точек в готовое объявление CSS background. Выберите линейный, радиальный или конический, выберите до трёх цветов с процентом позиции каждого, и сгенерированный CSS будет мгновенно обновляться при регулировке элементов управления.
Линейные, радиальные и конические градиенты
Линейный градиент — цвета переходят вдоль прямой линии под выбранным углом.
0degуказывает вверх,90degуказывает вправо,180degуказывает вниз и так далее вокруг круга. Это самый распространённый тип градиента, используется для фонов, кнопок и наложений.background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);Радиальный градиент — цвета распространяются из центральной точки вместо линии, создавая круговое или эллиптическое смешивание. Не нужно устанавливать угол; стандартный вид браузера (эллипс размером до дальнего угла, центрированный на элементе) охватывает подавляющее большинство случаев использования.
background: radial-gradient(#464aff 0%, #00d4ff 100%);Конический градиент — цвета вращаются вокруг центральной точки как цветовое колесо или круговая диаграмма, вместо смешивания вдоль линии или распространения наружу. Угол определяет, где начинается вращение.
background: conic-gradient(from 45deg, #ff0000 0%, #00ff00 50%, #0000ff 100%);
Цветовые точки и позиции
Каждая цветовая точка объединяет цвет с процентом позиции (0-100%) вдоль градиента. Позиция 0% — это начало градиента и 100% — его конец; промежуточные точки определяют, где каждый цвет достигает полной насыщенности. Этот инструмент поддерживает две обязательные цветовые точки плюс третью необязательную — достаточно для построения подавляющего большинства двух- и трёхцветных градиентов, используемых в реальном дизайне. Точки автоматически упорядочиваются по позиции, поэтому не имеет значения, в каком порядке вы их вводите.
Как использовать
- Выберите Тип градиента: Линейный, Радиальный или Конический.
- Для линейных и конических градиентов установите Угол — направление для линейного или начальную точку вращения для конического.
- Выберите Цвет 1 и Цвет 2 с их позициями — они определяют начало и конец градиента.
- Включите Добавить третью цветовую точку, если вам нужен промежуточный цвет, и установите его цвет и позицию.
- Скопируйте сгенерированное объявление
backgroundиз вывода кода и вставьте его в свою таблицу стилей.
Часто задаваемые вопросы
Почему радиальный градиент не имеет опций формы или позиции?
Стандартные настройки браузера — эллипс размером до дальнего угла, центрированный на элементе — уже соответствуют тому, как используется большинство радиальных градиентов. Если вам нужен круг вместо эллипса или градиент вне центра, добавьте ключевое слово circle или предложение at <position> к сгенерированному CSS вручную.
Могу ли я использовать более трёх цветовых точек?
Этот инструмент ограничен тремя точками, чтобы сохранить интерфейс простым. Для градиентов с большим количеством точек возьмите сгенерированный CSS и вручную расширьте разделённый запятыми список пар <color> <position>% — синтаксис одинаков независимо от количества добавляемых точек.
Что означает угол для конического градиента?
Это угол (в градусах), с которого начинается вращение цвета, измеряемый по часовой стрелке от верхушки. 0deg начинает вращение в 12 часов; 90deg начинает его в 3 часа.
Хранит ли этот инструмент или загружает что-либо? Нет. Все вычисления выполняются локально в вашем браузере — ваши значения цвета и позиции никогда не покидают ваше устройство.