Генератор mesh-градиента
Расставьте до шести цветовых пятен поверх основного цвета и смешайте их в мягкий сетчатый (mesh) градиент. Скопируйте результат как обычный CSS из радиальных градиентов или скачайте PNG для слайдов, обоев и картинок для соцсетей.
Работает в браузере: всё, что вы вводите, никуда не отправляется.
Как пользоваться
- Выберите основной цвет — он виден там, где пятна сошли на нет.
- Задайте каждому пятну цвет, размер и положение или нажмите Случайные цвета для новой палитры.
- Скопируйте CSS на любой элемент или выберите размер и скачайте PNG.
Как это работает
Каждое пятно превращается в radial-gradient(circle at X% Y%, цвет 0, transparent S%). В центре круг полностью окрашен и равномерно уходит в прозрачность на S % расстояния до самого дальнего угла. Все пятна лежат в background-image поверх background-color, а там, где они перекрываются, цвета смешиваются.
Пример
По умолчанию четыре пятна: оранжевое в точке 15 % / 20 %, фиолетовое в 85 % / 15 %, бирюзовое в 70 % / 85 % и жёлтое в 20 % / 80 % поверх светло-розового фона. Первая строка CSS — background-color: #ffd6e0;, за ней четыре радиальных градиента.
Советы
- Следите за читаемостью текста: поместите самую светлую область за заголовок или добавьте полупрозрачную подложку.
- Крупные пятна с сильным перекрытием дают более плавное смешение; мелкие выглядят как светящиеся точки.
- Зернистая текстура поверх скрывает полосы на плавных переходах на больших экранах — см. генератор текстуры шума.
Частые вопросы
Это настоящий mesh-градиент?
В CSS нет типа mesh-градиента, поэтому эффект собирают обычным для веба способом — из нескольких радиальных градиентов, каждый из которых переходит от цвета к прозрачности, поверх основного цвета. Выглядит как mesh-градиент и не требует файла с картинкой.
Как работают ползунки размера и положения?
Положение — центр пятна в процентах от ширины и высоты. Размер — докуда дотягивается цвет, прежде чем исчезнуть, в процентах от расстояния от центра до самого дальнего угла блока; так же это расстояние меряет CSS.
PNG будет выглядеть так же, как CSS?
Да, при тех же пропорциях. PNG рисуется на canvas с теми же центрами, радиусами и переходами. Предпросмотр принимает форму выбранного размера PNG, а на элементе с другими пропорциями пятна из CSS растягиваются вместе с ним.
Почему важен порядок пятен?
В CSS первое фоновое изображение рисуется сверху. Поэтому пятно 1 перекрывает остальные там, где они накладываются; чтобы изменить порядок, удалите пятна и добавьте их заново.