Генератор mesh-градієнтів
Створюйте плинні mesh-градієнти на WebGL — з експортом у CSS або зображення
Mesh-градієнт
5 точокКольори
Викривлення
Фільтри
Як працює генератор mesh-градієнтів
Створюйте плинні mesh-градієнти на WebGL. Розставляйте колірні точки, плавно змішуйте їх і експортуйте в CSS або зображення високої роздільності.
Рендеринг на WebGL
Mesh-градієнти рендеряться на WebGL, тож кілька колірних точок змішуються плавно й швидко. Результат виходить плинним і природним — звичайними CSS-градієнтами такого не досягти.
Перетягуйте колірні точки
Розміщуйте колірні точки будь-де на полотні перетягуванням. Кожна точка поширює свій колір довкола й плавно змішується із сусідніми — переходи виходять природними.
Експорт у зображення
Завантажте mesh-градієнт як PNG високої роздільності. Використовуйте його як фон першого екрана, графіку для соцмереж чи ресурс у будь-якому дизайн-інструменті.
CSS-фон
Експортуйте градієнт як CSS-фон, що відтворює mesh-ефект накладеними радіальними градієнтами. Вставте його у свої стилі — отримаєте легку версію на чистому CSS.
Часті запитання
Mesh-градієнт змішує кілька кольорів із точок, розкиданих по поверхні, і створює плавні, природні переходи. На відміну від лінійних чи радіальних градієнтів, що йдуть в одному напрямку, mesh-градієнт вільно перетікає між будь-якою кількістю колірних точок.
Нативних mesh-градієнтів у CSS поки немає. Інструмент генерує наближення з накладених радіальних градієнтів, дуже схоже на оригінал. Для точного до пікселя результату експортуйте PNG і використайте його як фон.
Стільки, скільки потрібно. Кожна точка змішується із сусідніми. Менше точок дає широкі, прості градієнти, більше — складні й деталізовані колірні поля.
Полотно використовує WebGL для справжньої mesh-інтерполяції, а CSS-експорт лише наближає її накладеними радіальними градієнтами. Результат близький, але не ідентичний — коли важлива точність, експортуйте PNG.