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

Генератор многоцветных меш-градиентов для фонов сайтов, графики в соцсетях и UI-дизайна. Выбирайте цвета, размещайте контрольные точки и получайте органические градиенты, которые невозможно создать обычными линейными или радиальными переходами.

Холст накладывает несколько радиальных градиентов, по одному на каждую контрольную точку. Перетащите точку, чтобы изменить форму смешения, поменяйте её цвет через образец, и код обновится сразу. До шести точек сохраняют результат сбалансированным. Экспортируйте в PNG или SVG в размерах баннеров вроде 1920x1080, вставьте SVG прямо в Figma или возьмите код как CSS, SCSS или Tailwind.

Как использовать

1. Выберите базовые цвета, кликнув по образцам или введя HEX-значения. Можно добавить до 6 контрольных цветовых точек.
2. Перетаскивайте контрольные точки на холсте, чтобы менять направление градиента.
3. Скопируйте код как CSS, SCSS или Tailwind либо скачайте градиент в PNG или SVG.

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

• Сделать хедер-фон, который не похож на шаблонную заготовку.
• Оформить карточки товара или обложку плейлиста цветом без фото.
• Сгенерировать фоны для экранов загрузки и пустых состояний в приложении.

Результат

UI-дизайнер создаёт меш-градиент от фиолетового к бирюзовому с 4 контрольными точками для секции-героя лендинга, затем копирует CSS для вставки в таблицу стилей.

Частые вопросы

Чем меш-градиент отличается от линейного?

Линейный градиент смешивает два цвета по одной оси. Меш-градиент накладывает несколько мягких цветовых пятен, и результат больше похож на акварельную заливку, чем на ровный переход. Границу между цветами заметить сложнее.

Почему CSS использует radial-gradient, а не conic-gradient?

Стек radial-gradient-ов имеет самую широкую поддержку в браузерах и аккуратно деградирует. Генератор выдаёт по одному radial-gradient на каждую точку и складывает их через background-image — работает в любом современном браузере без полифиллов.

Будет ли меш-градиент выглядеть одинаково в Safari и Chrome?

Да. На выходе стандартный CSS radial-gradient без вендорных префиксов. Safari, Chrome, Firefox и Edge рисуют идентичный результат. Очень старые браузеры откатываются на первый цвет.

Сколько контрольных точек можно использовать?

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

Можно ли экспортировать градиент в SVG?

Да. Экспорт в SVG собирает градиент из наложенных слоёв radial-gradient, поэтому он отображается везде, где работают CSS-градиенты, и вставляется прямо в Figma как заливка фигуры. Настоящий сеточный SVG-градиент по спецификации пока нигде не поддерживается, поэтому именно этот способ с наложением слоёв реально работает везде, куда вы его вставите.

Похожие инструменты