Генератор Mesh-градиентов

Создавайте мягкие mesh-фоны на CSS из наложенных радиальных градиентов. Перетаскивайте точки, задавайте охват, случайный seed и копируйте код.

Настройки mesh-градиента

Цвет фона

Сид

Цветовые точки

Цвет

Растяжение%

Положение X%

Положение Y%

Предпросмотр

Перетаскивайте маркеры в предпросмотре или вводите точные значения.

CSS-код

background-color: #ff99cc;
background-image:
  radial-gradient(at 0% 0%, #ffb3ba 0, transparent 50%),
  radial-gradient(at 100% 0%, #bae1ff 0, transparent 50%),
  radial-gradient(at 100% 100%, #baffc9 0, transparent 50%),
  radial-gradient(at 0% 100%, #ffffba 0, transparent 50%);

Что такое Генератор Mesh-градиентов?

Создаёт популярный мягкий эффект «mesh gradient» на чистом CSS: фоновый цвет плюс несколько радиальных градиентов, каждый из которых начинается в цветовой точке и затухает до прозрачности. До восьми точек можно расставить перетаскиванием в предпросмотре или ввести их положение.

Как пользоваться Генератор Mesh-градиентов

Выберите цвет фона.
Выберите цветовую точку и задайте её цвет, охват и положение по X и Y либо перетащите точку в предпросмотре.
Добавляйте и удаляйте точки, чтобы менять число смешиваемых цветов (от 1 до 8).
Нажмите «Случайно» для новой сетки или введите seed и примените его, чтобы получить воспроизводимый результат.
Скопируйте CSS-код.

Пример

Ввод

Default 4 points, background #ff99cc

Вывод

background-color: #ff99cc;
background-image:
  radial-gradient(at 0% 0%, #ffb3ba 0, transparent 50%),
  radial-gradient(at 100% 0%, #bae1ff 0, transparent 50%),
  radial-gradient(at 100% 100%, #baffc9 0, transparent 50%),
  radial-gradient(at 0% 100%, #ffffba 0, transparent 50%);

Четыре точки по углам: каждая затухает до прозрачности на 50% и смешивается с соседними.

Когда использовать Генератор Mesh-градиентов

Подходит для фонов первого экрана, лендингов, заставок приложений и размытых цветовых подложек под карточками в стиле glassmorphism. Если нужны точные прямые переходы цвета, используйте генератор CSS-градиентов; для настоящей деформации сетки нужен векторный редактор или шейдер canvas/WebGL.

Как работает Генератор Mesh-градиентов

Каждая точка превращается в radial-gradient(at x% y%, color 0, transparent spread%), и все они перечисляются в background-image поверх background-color. Поскольку каждый градиент затухает до прозрачного, цвета перекрываются и плавно смешиваются. Случайная генерация использует детерминированный генератор (mulberry32): один и тот же seed и число точек всегда дают одни и те же цвета и позиции. Это приближение настоящих mesh-градиентов (в CSS их нет), а не билинейная сетка патчей.

Распространенные Случаи Использования

Фоны первого экрана лендингов
Подложки для карточек glassmorphism
Цветные заглушки для обложек блога
Экраны онбординга приложений
Воспроизводимые фоны по seed в дизайн-системах

Часто Задаваемые Вопросы

Это настоящий mesh-градиент?

Ни одно CSS-свойство не рисует настоящие mesh-градиенты. Наложение радиальных градиентов, затухающих до прозрачности, это стандартный приём CSS, дающий очень похожий мягкий результат.