网格渐变生成器

功能介绍

网格渐变生成器可以帮你快速创建美观的Mesh渐变（网格渐变）背景，通过添加多个彩色径向光斑，调整光斑位置、颜色、大小和模糊程度，混合出自然流畅的渐变效果，支持导出CSS radial-gradient代码或者PNG图片，可直接用于网页设计。

使用方法

1. 设置画布宽度和高度，选择背景颜色。
2. 点击画布上的光斑即可选中它，拖动光斑可以改变位置。
3. 选中光斑后，在下方可以修改光斑的颜色、大小和模糊程度。
4. 点击「添加光斑」可以增加新的光斑（最多支持8个）。
5. 调整完成后，点击「导出CSS」获取渐变的CSS代码，点击「导出PNG」下载PNG图片。

实现原理

网格渐变本质是多个径向渐变叠加。每个光斑对应一个CSS radial-gradient：

radial-gradient(
  circle at X% Y%,
  颜色 0%,
  透明 光斑大小px
)

多个这样的径向渐变叠加在同一个背景上，就形成了自然混合的网格渐变效果。工具中Canvas实时预览和CSS导出保持一致。

注意事项

• 最少保留4个光斑，最多支持8个光斑。
• 模糊越大，光斑边缘越透明，过渡越自然；模糊越小，光斑边缘越锐利。
• 导出的CSS可以直接复制到你的CSS代码中使用，保持宽度和高度和生成的一致即可。