Генератор сетчатого градиента CSS
Создайте мягкий многоцветный сетчатый градиент из четырёх цветов углов, расположенных слоями в виде радиальных градиентов поверх базового цвета — с контролем размера смешивания, затухания и опциональным наложением зерна (или в формате SVG).
Ввод
Цвета углов
Цвет фона, отображаемый за сеткой.
Настройки сетки
Большие значения создают более мягкие и расширенные пятна.
Где каждый цвет переходит в прозрачность (ниже = более чёткие края).
Формат вывода
Вывод
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-gradient-mesh-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"colorTopLeft": "#ff6b6b",
"colorTopRight": "#feca57",
"colorBottomLeft": "#48dbfb",
"colorBottomRight": "#5f27cd",
"colorBase": "#1a1a2e",
"blendSize": "60",
"falloff": "50",
"enableGrain": "",
"grainIntensity": "25",
"outputFormat": "css"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-gradient-mesh-generator` tool (CSS Gradient Mesh Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-gradient-mesh-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 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Что такое сетчатый градиент?
Сетчатый градиент (также называемый "mesh gradient" или "blob gradient") — это мягкий многоцветный фон, созданный путём смешивания нескольких цветовых точек вместе вместо одного прямого или радиального перехода. Где обычный CSS linear-gradient или radial-gradient плавно переходит между двумя или тремя остановками вдоль одной оси, сетчатый градиент распределяет цвет по всему блоку — эффект, популяризированный инструментами вроде страниц маркетинга Stripe, Mesher и бесчисленных "aurora" или "blob" фонов.
Этот инструмент создаёт эффект на чистом CSS: четыре разных цвета, каждый закреплён в углу (верхний левый, верхний правый, нижний левый, нижний правый), каждый отображается как собственный слой radial-gradient(). Наложение всех четырёх как разделённых запятой слоёв background-image поверх однотонного базового цвета создаёт мягкое, живописное смешивание — без изображений, канвасов или JavaScript, необходимых во время выполнения.
Как использовать этот инструмент
- Выберите цвет для каждого из четырёх Цветов углов — Верхний левый, Верхний правый, Нижний левый, Нижний правый — плюс Базовый цвет, который видно где угловые пятна не достают.
- Отрегулируйте Размер смешивания % для управления тем, как далеко распространяется каждый цвет перед переходом в прозрачность — большие значения создают более крупные, мягкие и перекрывающиеся пятна.
- Отрегулируйте Затухание % для управления скоростью затухания каждого пятна — меньшие значения создают более чёткую и сосредоточенную точку цвета; большие значения постепенно распределяют цвет.
- Опционально включите Добавить наложение зерна и установите его интенсивность, чтобы получить готовый рецепт текстуры шума (встроенный SVG фильтр
feTurbulence) для наложения сверху — популярное дополнение к современным сетчатым градиентам в героических секциях, которое предотвращает плоские цветовые смеси от выглядящих слишком чистыми/полосатыми. - Выберите Формат вывода:
CSSдаёт вам объявлениеbackground-color+ многоуровневоеbackground-image, которое вы можете вставить прямо в стили;SVGдаёт вам автономный<svg>с четырьмя определениями<radialGradient>, полезно когда вам нужна сетка как графический ресурс вместо динамического CSS фона. - Скопируйте сгенерированный код или загрузите его и используйте в своём проекте.
Вывод обновляется мгновенно при любых корректировках управления — нет отдельного шага "генерация".
Почему четыре угла?
Четыре закреплённых в углах пятна — это самое простое расположение, которое всё ещё выглядит как настоящая "сетка" вместо одного пятна или двухцветного диагонального перехода — каждый угол блока получает свой цвет, а середина становится естественной зоной смешивания. Это также делает сгенерированный CSS компактным: четыре слоя radial-gradient(), без дополнительной разметки, без математики позиционирования для поддержки.
Часто задаваемые вопросы
Будет ли это работать во всех браузерах?
Да. Многоуровневые radial-gradient() фоны и несколько значений background-image разделённые запятой поддерживаются во всех основных браузерах на протяжении многих лет — префиксы поставщиков не требуются.
Могу ли я использовать более четырёх цветов? Не с этим инструментом — он создан вокруг четырёхугольного случая, который охватывает подавляющее большинство случаев использования сетчатых градиентов, сохраняя лёгкость чтения и редактирования вручную. Для сетчатого градиента вы всё ещё можете отрегулировать любой из четырёх цветов по вкусу.
В чём разница между CSS и SVG выводом?
Вывод CSS — это объявление background, предназначенное для вставки прямо в стили или атрибут style — оно отображается как живой, независимый от разрешения фон. Вывод SVG — это автономное изображение (элемент <svg> с определениями радиальных градиентов) — используйте его, когда вам нужна сетка как графический файл или встроенное изображение вместо динамического CSS фона.
Почему моё наложение зерна — это отдельный CSS блок вместо встраивания в фон?
Зерно работает лучше всего как mix-blend-mode: overlay на позиционированном дочернем элементе поверх сетки, поэтому шум смешивается с цветами снизу вместо их замены. Инструмент выводит готовый класс .mesh-grain (с шумом предварительно закодированным как встроенный SVG URI данных) — добавьте дочерний элемент с этим классом внутри вашего контейнера градиента.
Конфиденциальность
Всё происходит в вашем браузере. Ваши выбранные цвета и параметры никогда не отправляются на сервер — CSS или SVG генерируется и обновляется локально при корректировке элементов управления.