Генератор mesh-градієнтів

Створюйте mesh-градієнти з перетягуваними кольоровими точками

Mesh-градієнти змішують багато кольорів по поверхні м'якими, органічними переходами. Вони стали невід'ємною частиною фонів головних розділів, заставок застосунків і музичних обкладинок, бо виглядають багатше за простий двоколірний лінійний градієнт. Цей генератор mesh-градієнтів дає змогу розмістити від трьох до шести кольорових точок прямо на полотні, перетягнути їх на потрібні місця й миттєво бачити оновлене змішування.

Як це працює на чистому CSS

Браузери не підтримують справжні mesh-градієнти, але їх можна імітувати, наклавши кілька фонів radial-gradient(). Кожен шар центрований на одній із ваших точок і плавно переходить від кольору точки до повністю прозорої версії того самого кольору, а всі шари лежать поверх базового background-color. Переходи, що перекриваються, плавно змішують кольори, і так виникає ефект mesh. Згенерований CSS — це одна декларація без зображень, тож вона завантажується миттєво й масштабується до елемента будь-якого розміру.

Перехід до rgba() з нульовою альфою замість ключового слова transparent усуває сірі облямівки, які можуть з'являтися в деяких рушіях рендерингу, а також дає змогу точно відтворити той самий градієнт на HTML canvas для експорту в PNG.

Розмиття, шум і палітри

Повзунок розмиття додає CSS filter: blur() для ще м'якшого вигляду, а повзунок шуму накладає SVG-текстуру фрактального шуму, яка додає легку зернистість і зменшує смуги кольору на великих поверхнях. Кнопка «Випадкова палітра» підбирає гармонійний набір відтінків зі збалансованою насиченістю та світлістю, а «Випадкове розташування» ще й переставляє точки. Коли результат вас влаштовує, скопіюйте CSS у свою таблицю стилів або завантажте PNG розміром 1600 на 900 пікселів. Усе генерується локально у вашому браузері, і нічого не завантажується.