不管是前端还是 UI，我们经常会使用一些渐变工具。

比如带有噪点的渐变，还有根据图片生成对应颜色的渐变，以及带有几何图案或者酸性图案的渐变。

那么我将给大家介绍的工具，是我经常在用、可以实现我以上所说内容的渐变图片的工具。

静态渐变生成

Photo Gradient - 图片生成渐变的工具

链接：https://photogradient.com/

一般在给某个固定图片页面做渐变的背景的时候就会用到。

这个工具唯一的缺点就是比例需要自己输入。

但是大家一定会想到，如果给某些 posts 的封面做懒加载的时候，先提前加载这个渐变图片，然后再等真实的图片加载过来替换掉。

这个叫做【blur hash】，在上传图片的时候通过第三方库或者第三方服务直接生成作为 base64 和图片数据存在一起。

这样会有更好的用户体验。

Better Gradient - 封面渐变生成器

链接：https://better-gradient.com/editor

这个渐变工具的好处是，默认带了各种封面比例，用作封面的背景图非常适合。

它还支持现在最流行的噪点渐变背景。

可以控制噪点的颗粒度和 blur 的轻重。

当然控制渐变方向，比例的功能也是支持。

静态的渐变工具里，这个基本全能，和上面图片生成渐变形成互补。

动态渐变生成

color4bg - 模板丰富的动态渐变

链接：https://www.color4bg.com/

比较一般，可以通过视频、图片、ESM 的方式引入。

但是模板比较多，只能自定义颜色，不能自定义模板。

不能直接在 figma 或者 framer 里面使用插件导入。

shadergradient - 自定义度高的动态渐变

链接：https://www.shadergradient.co/

可以通过在代码、framer、figma 里面引入。

可以控制 shape、速度、动效、3D 视角，自定义程度非常高。

但是缺点就是形状比较局限。

不过可以通过调参数的方式曲线做出其他的形状。