网格渐变生成器
直接在 canvas 上生成多点彩色网格渐变,无需导入图片。调整色点的数量和颜色,然后导出为 PNG,或复制等效的 CSS 代码。
点击色块即可更改其颜色。
工作原理
每个彩色点都相当于一个影响源:对于 canvas 上的每个像素,最终颜色是所有色点颜色的加权平均,色点离像素越近,权重越大(反距离加权)。这样就能在您选择的各种颜色之间形成流畅自然的渐变。
复制的 CSS 与 PNG 的效果完全一致吗?
不完全一致。生成的 CSS 使用多层原生 CSS 径向渐变叠加,效果接近,但与 canvas 上计算出的反距离插值结果并非逐像素相同。这是一种轻量而忠实的近似,可以直接用作网站背景。
为什么每次点击“随机位置”效果都会变化?
每次生成时,色点的位置都会在 canvas 范围内随机选取。结合您选择的颜色,您无需手动摆放色点,就能快速尝试大量不同的网格渐变效果。
所有渲染都在您的浏览器本地完成:不会向服务器发送任何数据,即使您没有提供任何图片也是如此。