# Генератор градиентной сетки CSS (коническая + радиальная) Генерирует «градиентную сетку», популярную на Dribbble/Behance с 2024-го: несколько радиальных градиентов (цветовое пятно → растворение в прозрачный того же тона) поверх базового цвета (опционально — конический слой), с режимами наложения, SVG-зерном, сидированными раскладками (углы / кольцо / разброс / сетка), живым превью, копируемым CSS и Tailwind-классом. Пятна гаснут через 8-значный hex #RRGGBB00 — без серого кольца ключевого слова transparent. > Каноническая страница: https://elysiatools.com/ru/tools/css-gradient-mesh-generator - **Категория:** Design - **Ключевые слова:** сетка градиентов css, конический градиент, радиальные слои, фон аврора, tailwind градиент ## Обзор Базовый синтаксис (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(circle_at_20%_25%,_#7c3aed_0%,_#7c3aed00_60%),…] + bg-[#база]. ## Входные данные - **Палитра-пресет** (select) - **Свой цвет 1** (color) - **Свой цвет 2** (color) - **Свой цвет 3** (color) - **Свой цвет 4** (color) - **Количество цветовых пятен** (number) - **Расположение пятен** (select) - **Случайное зерно** (number) - **Спад (прозрачная граница %)** (number) - **Режим наложения** (select) - **Добавить конический слой** (checkbox) - **Начальный угол коники (градусы)** (number) - **Добавить зерно плёнки** (checkbox) ## Когда использовать - Создание современных фонов и аврора-эффектов для Hero-секций сайтов без тяжелых растровых изображений. - Генерация чистого CSS-кода или произвольных классов Tailwind CSS с поддержкой режимов наложения и зернистости. - Быстрый интерактивный подбор цветовых палитр, геометрии пятен и уровней прозрачности с живым предпросмотром. ## Как это работает - Выберите готовую палитру (Cosmic, Hyper, Ember и др.) или настройте 4 собственных HEX-цвета. - Задайте количество цветовых пятен (от 3 до 6), раскладку (углы, кольцо, разброс, сетка), сид генерации и процент спада прозрачности. - Включите при необходимости подложку конического градиента, эффект SVG-зерна пленки и нужный режим наложения (blend mode). - Скопируйте сгенерированное CSS-свойство background-image со слоями или единый класс с произвольным значением для Tailwind CSS. ## Сценарии использования - Оформление Hero-экранов, промо-баннеров и карточек продуктов с ультралегкой векторной графикой. - Создание светящихся темных интерфейсов и неоновых аврора-эффектов с режимом наложения screen. - Быстрое прототипирование фоновых стилей для компонентов дизайн-систем на Tailwind CSS. ## Частые вопросы ### Почему при затухании в прозрачность не появляется серое кольцо? Пятна растворяются в прозрачный цвет того же тона через 8-значный hex-код #RRGGBB00 вместо ключевого слова transparent. ### Для чего используется конический слой (conic underlay)? Конический градиент создает угловые цветовые переходы, формируя динамичную основу в стиле северного сияния (авроры). ### Как работает параметр случайного зерна (seed)? Алгоритм mulberry32 фиксирует координаты пятен в режиме разброса, гарантируя точную воспроизводимость сетки. ### Как спад (falloff) влияет на внешний вид градиента? 35–50% создают четкие цветовые пятна, 50–70% — стандартную градиентную сетку, а 80–100% — мягкую фоновую заливку. ### В каком виде экспортируется код для Tailwind CSS? В виде произвольного класса bg-[...], где пробелы заменены подчеркиваниями, дополненного базовым цветом bg-[#...]. ## Связанные инструменты - [Генератор SVG-спрайтов](https://elysiatools.com/ru/tools/svg-sprite-generator): Загрузите до 30 SVG-иконок и объедините их в один спрайт: режим для встроенного , режим для фрагментов внешнего файла. Восстанавливает viewBox из width/height, убирает дубликаты, опционально срезает fill/stroke под currentColor, всегда чистит и атрибуты on\*, и генерирует сниппеты для HTML / React / Vue / CSS с живым предпросмотром каждой иконки. - [Генератор CSS-сниппетов: глассморфизм / неоморфизм](https://elysiatools.com/ru/tools/glassmorphism-css-snippet-builder): Сквозной генератор полного CSS-сниппета глассморфизма или неоморфизма: настройте размытие, насыщенность, непрозрачность оттенка, радиус, рамку, внешнюю тень и верхний блик; опционально — зернистая SVG feTurbulence-текстура и @supports-фолбэк; автоматически добавляется префикс -webkit-backdrop-filter (обязателен до Safari 18) и маппинг на классы Tailwind (с заметкой о различиях v3/v4), плюс живой предпросмотр карточки на градиентном фоне. - [Генератор SVG Favicon](https://elysiatools.com/ru/tools/svg-favicon-generator): Преобразует SVG или растровый логотип в полный набор favicon с ICO, PNG-версиями, Apple touch icon и web manifest - [Инструмент Диагональных Водяных Знаков](https://elysiatools.com/ru/tools/image-watermark-diagonal): Добавляйте диагональные водяные знаки на изображения с настраиваемым углом, размером, прозрачностью и позиционированием вдоль диагонали - [Инструмент Мозаичных Водяных Знаков](https://elysiatools.com/ru/tools/image-watermark-tile): Добавляйте мозаичные водяные знаки на изображения с настраиваемым размером, прозрачностью, интервалами и узорами - [Генератор Data URI](https://elysiatools.com/ru/tools/data-uri-generator): Преобразует файлы в Data URI (Base64 или процентное кодирование) для встраивания изображений, шрифтов и ресурсов прямо в HTML, CSS или Markdown - [Пирамида биомассы и поток энергии (правило 10%)](https://elysiatools.com/ru/tools/biomass-pyramid): Строит трофическую пирамиду по закону Линдемана: введите энергию/биомассу продуцентов E₁, эффективность переноса (по умолчанию 10%, диапазон 0.1–40%) и число уровней (3–6). Получаете энергию/биомассу каждого уровня, его долю от продуцентов и потери на каждом переносе (дыхание, экскреция, непоедание). Рисует цветную SVG-пирамиду (ширины в масштабе √E для наглядности; числовые подписи всегда истинные) и таблицу по уровням, объясняя, почему пирамиды энергии всегда прямые, а пирамиды чисел/биомассы могут быть перевёрнутыми (например, морские экосистемы). Типичные измеренные эффективности: 5–20%. - [Разборщик порядка черт китайских иероглифов](https://elysiatools.com/ru/tools/chinese-stroke-order-decomposition): Разбирает китайский иероглиф на последовательность черт и структуру ключей, выводит SVG-демонстрацию порядка черт с расцветкой компонентов. ## Примеры - [SVG Примеры](https://elysiatools.com/ru/samples/svg-samples): Примеры масштабируемой векторной графики (SVG) демонстрирующие различные возможности и техники SVG - [Примеры Tailwind CSS](https://elysiatools.com/ru/samples/tailwind-css): Примеры Tailwind CSS - CSS-фреймворк с утилитарно-первым подходом, адаптивным дизайном, компонентами и пользовательской конфигурацией - [Примеры Обработки Изображений Web Python](https://elysiatools.com/ru/samples/web-image-processing-python): Примеры обработки изображений Web Python используя PIL/Pillow включая чтение, сохранение, изменение размера и преобразование формата - [Примеры CSS-фреймворка Bulma](https://elysiatools.com/ru/samples/bulma): Примеры CSS-фреймворка Bulma, включая столбцы, компоненты, элементы управления формами, систему сетки и современные шаблоны дизайна на основе CSS ## Связанные материалы - [Инструменты для работы с SVG, favicon и иконками](https://elysiatools.com/ru/hubs/svg-favicon-icon-workflows): Собирайте favicon-пакеты, оптимизируйте SVG, конвертируйте иконки между ICO, PNG, JPG, WebP и SVG и готовьте web-ready assets в одном хабе. - [Инструменты кодирования и конвертации аудио](https://elysiatools.com/ru/hubs/audio-convert): Сравните инструменты конвертации аудиоформатов, изменения битрейта, частоты дискретизации, смены кодека и экспорта в одном хабе. - [Инструменты конвертации форматов изображений и анимированного экспорта](https://elysiatools.com/ru/hubs/image-convert): Сравните конвертеры JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 и инструменты экспорта анимированных изображений в одном хабе. - [Инструменты JSON-обмена и перевода форматов](https://elysiatools.com/ru/hubs/json-convert): Сравните инструменты преобразования JSON для CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN и других структурированных форматов в одном хабе.