Mesher

Mesher（官网：https://csshero.org/mesher/）是CSS Hero推出的**纯CSS网格渐变（Mesh Gradient）可视化在线生成工具**，面向网页UI设计师、前端开发者打造，无需登录注册，可视化拖拽编辑多色流体渐变，一键导出原生CSS背景代码，用于网站首页、Banner、登录页、卡片氛围感底色，全部功能免费商用。
平台核心能力：画布拖拽式网格渐变编辑、多HSLA色板自定义、一键随机配色、本地收藏渐变方案、实时生成完整CSS代码；区别传统线性/径向渐变，Mesh网格渐变实现多色柔和流体融合，自带半透明透明度调节，适配现代极简、赛博、马卡龙、柔和治愈系网页视觉。

一、可视化网格渐变核心编辑系统

1. 画布自由点位拖拽

左侧大预览画布支持新增、拖动、删除色彩锚点，每个点位独立控制色彩、位置、扩散范围；多色彩自动平滑混合，生成无生硬分割的流体弥散渐变，解决双色渐变单调问题，轻松实现多层混色氛围感背景。

2. 背景底色独立设置

单独配置底层基础Bg Color，支持HSLA格式设置透明度，搭配上层多层网格渐变叠加，做出层次丰富的复合背景效果。

二、色板与配色配套工具

1. 多色Palette自定义面板

右侧Palette面板可批量编辑整套HSLA色彩，支持增删色块、单独修改色相/饱和度/明度/透明度；全部色值实时同步画布预览，点击色块快速替换锚点颜色。

2. Randomize一键随机配色

一键随机生成全套协调多色板，快速探索不同调性渐变，包含低饱和莫兰迪、高饱和霓虹、柔和马卡龙、冷暖撞色多种风格，大幅减少手动配色试错成本。

三、方案收藏与导出能力

1. 本地收藏Favs存储

创作完成的渐变方案存入浏览器LocalStorage本地收藏夹，无需账号即可留存多套渐变模板；可单独删除单条收藏或清空浏览器缓存批量清除，下次打开页面直接复用。

2. Export导出生产级CSS代码

一键导出完整可直接复制的CSS background复合代码，包含基础底色+多层mesh网格渐变堆叠，兼容Chrome、Safari、Firefox、Edge全主流浏览器，无需手动补兼容前缀，粘贴即可用于网页、小程序项目。

四、平台核心适配优势

1. 独有Mesh网格渐变：突破传统双色渐变限制，多色流体柔和融合，打造当下流行高级网页氛围感背景；
2. 零门槛轻量化：免注册、无广告、无付费功能，浏览器打开即用，电脑移动端自适应；
3. 前端高度友好：直接输出成品CSS代码，无需二次换算色值，适配WordPress、Vue、React各类网站项目；
4. 本地安全存储：收藏方案仅存在浏览器本地，不上传云端，原创渐变素材无泄露风险；
5. 全场景商用免费：生成的CSS渐变代码无版权约束，企业官网、活动页、后台UI均可无限制使用。

Mesher依托可视化拖拽网格渐变编辑器、HSLA多色调色面板与一键CSS导出功能，专门解决网页高级流体氛围感背景制作需求，是UI设计师、前端快速生成多色柔和网格渐变的轻量化免费专用工具。