WebGradients是由设计素材平台itmeo(原名UI‑Gradients)推出的免费在线渐变配色工具站点。站点收录了180+条线性渐变,每条渐变均提供CSS、SVG、PNG三种导出格式,并可直接下载Sketch/Photoshop(.sketch、.psd)资源包。用户无需注册、无需安装软件,打开首页即可实时预览并复制对应的十六进制颜色或CSS代码,亦可一次性打包下载全部渐变,适用于网页、移动端、海报、Banner等任何视觉设计场景。
1、完全免费:
所有渐变资源均可在商业或个人项目中免费使用,无版权顾虑。
2、多格式导出:
支持CSS、SVG、PNG以及Sketch/PSD文件,便于在前端开发和UI设计工具中直接使用。
3、实时预览&复制:
简洁界面可即时预览渐变效果,点击即复制代码或下载资源。
4、打包下载:
提供“一键下载全部渐变包”,离线使用更方便。
5、兼容性好:
渐变实现基于CSS3`background-image`,兼容现代浏览器,必要时提供`background-blend-mode`替代方案。
6、开源MIT许可证:
代码公开,可自由修改和二次分发。
1、网页前端开发:
直接在CSS中引用渐变类名或`background-image`,快速为页面、模块、按钮等添加视觉层次。
2、UI/UX设计:
在Sketch、Figma、Photoshop中导入.sketch/.psd渐变文件,用于移动端或桌面应用界面配色。
3、Banner与海报:
通过PNG导出或复制CSS代码,为营销Banner、社交媒体封面、电子邮件模板等提供高颜值背景。
4、数据可视化:
在图表、仪表盘中使用渐变填充,提高信息层次感和视觉吸引力。
5、原型与演示:
在原型工具(如Axure、Adobe XD)中直接粘贴CSS,快速呈现交互效果。