WebGradients是一款免费在线渐变配色工具

WebGradients是由设计素材平台itmeo（原名UI‑Gradients）推出的免费在线渐变配色工具站点。站点收录了180+条线性渐变，每条渐变均提供CSS、SVG、PNG三种导出格式，并可直接下载Sketch/Photoshop（.sketch、.psd）资源包。用户无需注册、无需安装软件，打开首页即可实时预览并复制对应的十六进制颜色或CSS代码，亦可一次性打包下载全部渐变，适用于网页、移动端、海报、Banner等任何视觉设计场景。

WebGradients平台特点：

1、完全免费：

所有渐变资源均可在商业或个人项目中免费使用，无版权顾虑。

2、多格式导出：

支持CSS、SVG、PNG以及Sketch/PSD文件，便于在前端开发和UI设计工具中直接使用。

3、实时预览&复制：

简洁界面可即时预览渐变效果，点击即复制代码或下载资源。

4、打包下载：

提供“一键下载全部渐变包”，离线使用更方便。

5、兼容性好：

渐变实现基于CSS3`background-image`，兼容现代浏览器，必要时提供`background-blend-mode`替代方案。

6、开源MIT许可证：

代码公开，可自由修改和二次分发。

WebGradients典型应用场景：

1、网页前端开发：

直接在CSS中引用渐变类名或`background-image`，快速为页面、模块、按钮等添加视觉层次。

2、UI/UX设计：

在Sketch、Figma、Photoshop中导入.sketch/.psd渐变文件，用于移动端或桌面应用界面配色。

3、Banner与海报：

通过PNG导出或复制CSS代码，为营销Banner、社交媒体封面、电子邮件模板等提供高颜值背景。

4、数据可视化：

在图表、仪表盘中使用渐变填充，提高信息层次感和视觉吸引力。

5、原型与演示：

在原型工具（如Axure、Adobe XD）中直接粘贴CSS，快速呈现交互效果。

进入webgradients官方入口