Почему при затухании в прозрачность не появляется серое кольцо?

Пятна растворяются в прозрачный цвет того же тона через 8-значный hex-код #RRGGBB00 вместо ключевого слова transparent.

Для чего используется конический слой (conic underlay)?

Конический градиент создает угловые цветовые переходы, формируя динамичную основу в стиле северного сияния (авроры).

Как работает параметр случайного зерна (seed)?

Алгоритм mulberry32 фиксирует координаты пятен в режиме разброса, гарантируя точную воспроизводимость сетки.

Как спад (falloff) влияет на внешний вид градиента?

35–50% создают четкие цветовые пятна, 50–70% — стандартную градиентную сетку, а 80–100% — мягкую фоновую заливку.

В каком виде экспортируется код для Tailwind CSS?

В виде произвольного класса bg-[...], где пробелы заменены подчеркиваниями, дополненного базовым цветом bg-[#...].

Elysia Tools

Навигация

Design

Генератор градиентной сетки CSS (коническая + радиальная)

Генерирует «градиентную сетку», популярную на Dribbble/Behance с 2024-го: несколько радиальных градиентов (цветовое пятно → растворение в прозрачный того же тона) поверх базового цвета (опционально — конический слой), с режимами наложения, SVG-зерном, сидированными раскладками (углы / кольцо / разброс / сетка), живым превью, копируемым CSS и Tailwind-классом. Пятна гаснут через 8-значный hex #RRGGBB00 — без серого кольца ключевого слова transparent.

Детали

С чем помогает этот инструмент

Базовый синтаксис (MDN): в многослойном background-image первый слой сверху; радиальный слой — radial-gradient(circle at x% y%, #цвет 0%, #цвет00 60%): прозрачная граница 35–50% = резкие пятна, 50–70% = классическая сетка (по умолчанию 60%), 80–100% = мягкая заливка; базовый цвет — в background-color. Конический слой conic-gradient(from Xdeg at 50% 50%, …) даёт авроральную угловую вариацию. Список background-blend-mode соответствует порядку слоёв (normal / multiply «чернила» / screen «свечение» / overlay насыщенные середины / soft-light мягкая аврора / hue / difference психоделика). Зерно — инлайн SVG data-URI feTurbulence при низкой прозрачности + mix-blend-mode: overlay. Раскладки управляются сидом mulberry32: один сид — одна сетка. Tailwind-экспорт — одно произвольное значение (пробелы → подчёркивания): bg-[radial-gradient(circleat20%25%,#7c3aed0%,#7c3aed00_60%),…] + bg-[#база].

Запуск

Запустить этот инструмент

Заполните форму, запустите инструмент и посмотрите результат на этой же странице.

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

Нажмите пример, чтобы автоматически заполнить форму. Файлы по-прежнему нужно загрузить.

2 примеров

Фон-герой Cosmic — стандартная сетка

Четыре пятна (фиолетовый, розовый, циан, мята) по углам на почти чёрной базе, спад 60 %, наложение normal — фирменный вид в духе conic.style, готов к вставке.

<section class="cgm">300px live mesh preview · .gradient-mesh CSS block with 4 radial layers · Tailwind bg-[…] class · layer chips + palette</section>

Свечение углей — разброс, конический слой, зерно и наложение screen

Палитра ember разбросана от сида 777 по почти чёрной базе, с коническим слоем от 45°, светящимся наложением screen и зерном плёнки — полный стек финиша в одном пресете; подсказка инструмента предупреждает о обратной комбинации (светлая база + screen).

<section class="cgm">ember scatter mesh preview glowing over #1c0a0a · 5 radial layers + conic underlay = 6 layers · grain ::after pseudo-element in the CSS · Tailwind class</section>

Ввод

Параметры сгруппированы, чтобы длинные формы было проще просматривать.

13 параметров

НастройкиНастройте форматы, диапазоны, числа и режимы.11

Палитра-пресетselectНеобязательноСвой цвет 1colorНеобязательноСвой цвет 2colorНеобязательноСвой цвет 3colorНеобязательноСвой цвет 4colorНеобязательноКоличество цветовых пятенnumberНеобязательноРасположение пятенselectНеобязательноСлучайное зерноnumberНеобязательноСпад (прозрачная граница %)numberНеобязательноРежим наложенияselectНеобязательноНачальный угол коники (градусы)numberНеобязательно

ПереключателиВключайте или отключайте дополнительные режимы.2

Добавить конический слойcheckboxНеобязательноВключено, если отмеченоДобавить зерно плёнкиcheckboxНеобязательноВключено, если отмечено

Результат

Готово к запуску

После запуска здесь появятся файлы, текст, структурированные данные или потоковый вывод.

Примеры

Примеры для этого инструмента

Связано

Генератор градиентной сетки CSS (коническая + радиальная)

С чем помогает этот инструмент

Запустить этот инструмент

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

Ввод

Результат

Примеры для этого инструмента

Продолжить с похожими инструментами и темами

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

Ввод

Результат

Узнайте, когда использовать этот инструмент, что он поддерживает и как его применяют пользователи.

Ключевые факты

Обзор

Когда использовать

Как это работает

Сценарии использования

Примеры

1. Фон для Hero-секции в палитре Cosmic

2. Светящийся фон с текстурой зерна для темной темы

FAQ

SVG Примеры

Примеры Tailwind CSS

Примеры Обработки Изображений Web Python

Примеры CSS-фреймворка Bulma

Генератор SVG-спрайтов

Генератор CSS-сниппетов: глассморфизм / неоморфизм

Генератор SVG Favicon

Инструмент Диагональных Водяных Знаков

Инструменты для работы с SVG, favicon и иконками

Инструменты кодирования и конвертации аудио

Инструменты конвертации форматов изображений и анимированного экспорта

Инструменты JSON-обмена и перевода форматов