### [Webgradients](https://hello123.com/)

**Published:** 2026-09-29T01:00:00

**Author:** hello123

**Excerpt:** Webgradients 收录 180 款免费 UI 渐变配色，提供 CSS 代码、PNG 图片及 Sketc…

网页和 UI 设计师寻找背景渐变时，常会耗费大量时间从零调试。[Webgradients](https://webgradients.com/) 提供了一个直接方案。该工具于 2014 年上线，免费收录 **180 个精选线性渐变**，覆盖暖色、冷色、霓虹、马卡龙等主流风格。用户可一键复制 CSS 代码，也能下载 Sketch、Figma、Photoshop 文件，全球累计超过 19 万设计师收藏。

## Webgradients 是什么：渐变配色库速览

这是一款免费渐变配色库，整个集合收录 180 个线性预设，按色系分类展示。所有渐变可直接应用到网页背景、UI 元素或平面设计稿，无需注册即开即用。公开评论里它被频繁称作“任何希望将即用型渐变融入项目的人的良好资源”，已有 10 多年历史。

### UI 设计师真正好用的三个场景

1.  **着陆页英雄区背景**：找到匹配品牌色的预设后点击 Copy CSS，3 秒内粘贴到样式表，省去手调色标。
2.  **UI 按钮视觉强化**：用 ‘Sharp Blues’ 这类高对比渐变，强化 CTA 按钮的视觉层级。
3.  **海报与设计文件**：下载 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 变量。

{"@context":"https://schema.org","@graph":\[{"@type":"Organization","@id":"https://hello123.com/#organization","name":"Hello123","url":"https://hello123.com/"},{"@type":"WebSite","@id":"https://hello123.com/#website","url":"https://hello123.com/","name":"Hello123","publisher":{"@id":"https://hello123.com/#organization"},"inLanguage":"zh-CN"},{"@type":"WebPage","@id":"https://hello123.com/%E9%85%8D%E8%89%B2%E6%8E%A8%E8%8D%90/webgradients-206/","url":"https://hello123.com/%E9%85%8D%E8%89%B2%E6%8E%A8%E8%8D%90/webgradients-206/","name":"Webgradients - 180款免费UI渐变配色","isPartOf":{"@id":"https://hello123.com/#website"},"inLanguage":"zh-CN"},{"@type":"BreadcrumbList","itemListElement":\[{"@type":"ListItem","position":1,"name":"首页","item":"https://hello123.com/"},{"@type":"ListItem","position":2,"name":"配色推荐","item":"https://hello123.com/%E9%85%8D%E8%89%B2%E6%8E%A8%E8%8D%90/"},{"@type":"ListItem","position":3,"name":"Webgradients - 180款免费UI渐变配色","item":"https://hello123.com/%E9%85%8D%E8%89%B2%E6%8E%A8%E8%8D%90/webgradients-206/"}\]},{"@type":"Article","@id":"https://hello123.com/%E9%85%8D%E8%89%B2%E6%8E%A8%E8%8D%90/webgradients-206/#article","headline":"Webgradients - 180款免费UI渐变配色","description":"Webgradients 收录 180 款免费 UI 渐变配色，提供 CSS 代码、PNG 图片及 Sketch/Figma/Photoshop 文件下载，方便设计师直接调用与修改。","publisher":{"@id":"https://hello123.com/#organization"},"inLanguage":"zh-CN","datePublished":"2026-07-11T16:11:58.332Z","dateModified":"2026-07-28T16:08:37.490Z","author":{"@type":"Organization","name":"Hello123 编辑团队"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://webgradients.com/"},"isPartOf":{"@id":"https://hello123.com/%E9%85%8D%E8%89%B2%E6%8E%A8%E8%8D%90/webgradients-206/"},"citation":\[{"@type":"CreativeWork","@id":"https://www.usetools.design/tools/webgradients","name":"usetools.design"},{"@type":"CreativeWork","@id":"https://webcoursesbangkok.com/inspirational-web-gradients/","name":"webcoursesbangkok.com"},{"@type":"CreativeWork","@id":"https://www.producthunt.com/products/web-gradients","name":"producthunt.com"},{"@type":"CreativeWork","@id":"https://webcatalog.io/en/apps/webgradients","name":"webcatalog.io"},{"@type":"CreativeWork","@id":"https://designmodo.com/gradients/","name":"designmodo.com"}\],"about":\[{"@type":"Thing","name":"Webgradients","additionalType":"https://schema.org/Product"},{"@type":"Thing","name":"渐变配色","additionalType":"https://schema.org/Concept"},{"@type":"Thing","name":"UI设计","additionalType":"https://schema.org/Concept"},{"@type":"Thing","name":"网页设计","additionalType":"https://schema.org/Concept"},{"@type":"Thing","name":"CSS","additionalType":"https://schema.org/Concept"},{"@type":"Thing","name":"设计师","additionalType":"https://schema.org/Person"}\]},{"@type":"FAQPage","mainEntity":\[{"@type":"Question","name":"Webgradients 提供的渐变是否可以用于商业项目？","acceptedAnswer":{"@type":"Answer","text":"据官网明确声明，所有渐变都可用于个人和商业项目，无水印、无隐藏费用、无积分系统，可放心集成到商业网站、应用或平面设计作品。"}},{"@type":"Question","name":"Webgradients 的渐变库有多少个预设？更新频率如何？","acceptedAnswer":{"@type":"Answer","text":"整个库共收录 180 个精选线性渐变，自 2014 年上线以来更新频率较低，更侧重经典高质量预设而非追逐最新潮流趋势，因此可能缺少当下流行配色。"}},{"@type":"Question","name":"除了 CSS 代码，Webgradients 还支持哪些文件格式导出？","acceptedAnswer":{"@type":"Answer","text":"除 CSS 代码外，还支持 PNG 图片以及 Sketch、Figma、Photoshop 三种设计软件的专用文件下载，方便直接导入相应工作流。"}}\]}\]}



---