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

Создавайте красивые фоны с меш-градиентами

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

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

#F97316Позиция: 20%, 30%

#E11D48Позиция: 80%, 20%

#7C3AEDПозиция: 50%, 80%

#06B6D4Позиция: 10%, 70%

Размер холста

CSS

background-color: #f97316;
background-image:
    radial-gradient(at 20% 30%, rgba(249,115,22,1) 0px, transparent 50%),
    radial-gradient(at 80% 20%, rgba(225,29,72,1) 0px, transparent 50%),
    radial-gradient(at 50% 80%, rgba(124,58,237,1) 0px, transparent 50%),
    radial-gradient(at 10% 70%, rgba(6,182,212,1) 0px, transparent 50%);

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

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

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

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

Результат

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

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