网页和 UI 设计师寻找背景渐变时，常会耗费大量时间从零调试。Webgradients 提供了一个直接方案。该工具于 2014 年上线，免费收录 180 个精选线性渐变，覆盖暖色、冷色、霓虹、马卡龙等主流风格。用户可一键复制 CSS 代码，也能下载 Sketch、Figma、Photoshop 文件，全球累计超过 19 万设计师收藏。
Webgradients 是什么：渐变配色库速览
这是一款免费渐变配色库，整个集合收录 180 个线性预设，按色系分类展示。所有渐变可直接应用到网页背景、UI 元素或平面设计稿，无需注册即开即用。公开评论里它被频繁称作“任何希望将即用型渐变融入项目的人的良好资源”，已有 10 多年历史。
UI 设计师真正好用的三个场景
- 着陆页英雄区背景：找到匹配品牌色的预设后点击 Copy CSS，3 秒内粘贴到样式表，省去手调色标。
- UI 按钮视觉强化：用 ‘Sharp Blues’ 这类高对比渐变，强化 CTA 按钮的视觉层级。
- 海报与设计文件：下载 PSD 或 Sketch 文件作为图层背景，避免在 Photoshop 里从零搭建。
输出格式与兼容性
该平台支持五种导出格式，适配不同工作流程：
| 格式 | 适用场景 |
|---|---|
| CSS 代码 | 主流前端场景，直接复制粘贴到样式表 |
| PNG 图片 | 占位符或非 CSS 环境下的静态展示 |
| Sketch / Figma / Photoshop | 设计软件原生图层，可二次编辑 |
官方明确声明所有渐变可用于个人和商业项目，无水印、无积分墙、无隐藏费用。
与同类工具的差异
相比 uiGradients、Grabient、Ultimate CSS Gradient Generator，该网站的优势在于格式齐全（5 种）、库精选且完全免费。劣势是预设只读，不支持拖动色标、改角度、加色点。需要精细调色时，建议换用 Ultimate CSS Gradient Generator。Reddit 上有用户反馈部分设计师仍倾向自己从头创建渐变，认为库的“有用性”取决于项目类型。
不那么理想的地方
- 预设只读：不能精确调整颜色、角度或停点，需要定制时只能转向竞品。
- 更新缓慢：集合自上线以来没有大改版，追最新潮流趋势的设计师可能失望。
- 功能单一：不支持网格渐变、径向渐变、动画渐变等复杂效果。
在 WebGL 3D 场景里，可以提取网站色值作为纹理映射起点，但 CSS 代码本身没法直接驱动着色器程序（Shader），需要开发者手动改写为 GLSL 变量。
