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

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

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

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

#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 для вставки в таблицу стилей.

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