🌈
网格渐变生成器
生成时下流行的多点网格渐变（mesh gradient）背景，一键复制 CSS。
本地处理 · 不上传
加载工具中…
相关：mesh · gradient · 网格渐变 · 背景 · css
网格渐变生成器叠加多个不同位置的径向渐变，生成柔和的多彩背景，实时预览并输出纯 CSS 代码，无需图片。
使用步骤
- 调整各色点的位置与颜色
- 增减色点数量
- 预览整体效果
- 复制生成的 CSS
使用场景
- 制作落地页的柔和背景
- 设计卡片与区块的彩色底
- 做需要氛围感的封面背景
- 替代渐变图片减少加载
小贴士
- 原理是多个大半径的径向渐变叠加，边缘用透明色收尾，让各色块自然融合，而不是硬拼在一起。
- 配色不要超过三到四种，且应取自同一色系或相邻色相，颜色一多就会显脏。
- 作为文字背景时要保证对比度，柔和的浅色背景配深色文字最稳妥。
常见问题
和普通渐变有什么区别？
线性和径向渐变只有一个方向或一个中心，网格渐变通过叠加多个中心点，产生更自然的多彩晕染效果，接近设计软件里的网格渐变工具。
性能怎么样？
纯 CSS 实现，浏览器绘制成本很低，也不需要额外的图片请求。这是它相比背景图片最大的优势。
能做动画吗？
渐变本身不能直接过渡，但可以给容器加缓慢的 transform 或用多层叠加做位置漂移，配合较长的动画时长能做出呼吸感。
网格渐变生成器是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用网格渐变生成器，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。