webgradients

180款免费渐变，一键复制CSS，支持Figma和AI调用

WebGradients 是一个免费的开源渐变配色资源库，提供 180 种精心设计的 CSS3 渐变方案，并支持 Figma、Sketch、PSD 等设计工具格式。项目核心是提供一套完整的渐变数据集，以 JSON 格式输出，方便设计工具、渐变生成器以及 AI 代理直接调用。它解决了设计师和开发者寻找高质量渐变配色耗时、格式不统一的问题，通过标准化数据让渐变资源能无缝集成到各类工作流中。项目包含可视化预览页面，用户可一键复制 CSS 代码，或下载设计源文件。对于 AI 代理，JSON 数据集可作为训练或实时生成的设计令牌，提升自动化设计能力。整体上，它是一个连接设计灵感与工程实现的轻量级工具，兼具资源库和 API 的双重属性。

开源 free 设计创意

访问官网 ↗ GitHub ↗ 文档 ↗

GitHub 星标 ★ 2478

维护状态维护中

是否开源是

定价模式 free

项目数据

分类设计创意

开发团队itmeo

所属国家

官网地址https://webgradients.com

GitHubhttps://github.com/itmeo/webgradients

定价模式free

价格说明完全免费，提供180个渐变配色，支持CSS、Figma、Sketch、PSD及JSON格式下载，无付费版本。

访问状态

是否开源是

开源协议MIT

主要语言CSS

技术栈/模型ai-agents,background,colors,css,css-gradients,dataset,design,design-tokens,figma,figma-plugin,frontend,gradient,json,open-source,sketch,ui,webdesign

GitHub 星标★ 2478

30天Star增速

HF 下载量

上线时间2017-01-08 00:00:00

最近更新2026-09-21 00:00:00

维护状态维护中

中文支持

访问方式

移动端支持

综合评分

收录时间2026-08-10

浏览次数6

使用教程

难度：入门约 5 分钟部署方式：库/依赖 5 步

环境要求

一个可编辑的 HTML 文档或网页项目（用于引入 CSS）
能访问 GitHub 下载 webgradients.css 文件
如需在 Figma 中使用：需要 Figma 账号并访问社区插件页
如需 AI/代理调用：可直接读取仓库中的 JSON 数据集

安装与启动步骤

1下载渐变样式表

打开 README 中 webgradients.css 的链接，下载该文件到本地。README 未提供命令行下载方式，请在浏览器中点击链接保存。
2放入项目目录

把下载到的 webgradients.css 放进你的项目文件夹中，位置与要引用的 HTML 文件保持相对路径一致。
3在 head 中引入

在文档的 head 中通过 link 标签引入该 CSS 文件，路径需与你实际存放位置一致。
```
  
    
  
  ...
```
4取用 JSON 数据集

如需给设计工具或 AI 代理使用，直接读取仓库里的 gradients.json（含色标位置）或 gradients-parsed.json（扁平化、索引补零）。
5安装 Figma 插件

如要在 Figma 内直接用全部 180 个渐变，打开 README 给出的 Figma 社区插件页面并点击安装。

关键配置

配置项	必填	说明	示例
`webgradients.css`	是	本地渐变样式表，需在文档 head 中链接后才能使用
`gradients.json`	否	完整数据集，包含每个色标的颜色与位置	`gradients.json`
`gradients-parsed.json`	否	扁平化变体，索引为补零字符串，便于程序解析	`gradients-parsed.json`

如何确认成功

用浏览器打开页面，确认 webgradients.css 无 404 加载成功；元素套用文件中的渐变类后能看到渐变背景即算成功。

常见问题

Q：这些渐变可以商用吗？

A：可以。README 明确说明 180 个渐变对个人和商业用途均免费。

Q：除了 CSS，还有什么格式？

A：还提供 .sketch、.PSD 和 Figma 格式，可直接在对应设计工具中使用。

Q：怎么把渐变数据喂给 AI 或代理？

A：使用仓库中的 gradients.json 或 gradients-parsed.json，每条含 name、index、deg、group 和色标列表。

Q：需要安装依赖或构建吗？

A：不需要。README 的使用方式只有下载 CSS 文件、放到项目里、在 head 中链接三步。

注意事项

README 未列出具体渐变 class 名称，使用时需打开 webgradients.css 查看实际类名。
JSON 中 deg 为 CSS 渐变角度，group 为主色，gradient 为有序色标列表，pos 单位为 %。
下载链接指向 GitHub 页面，请选择保存文件而非只保存网页。

核心亮点

提供180种精选渐变，覆盖主流设计需求，质量高且风格多样
输出JSON数据集，可直接被设计工具、生成器和AI代理程序化调用
支持Figma、Sketch、PSD等多种格式，适配不同设计工作流

不足之处

渐变数量固定为180种，更新频率低，可能无法满足持续新增的需求
文档和社区生态相对薄弱，扩展性和二次开发支持有限

适用场景

网页或应用开发时快速挑选背景渐变
设计工具中导入渐变资源，提升UI设计效率
AI生成设计或自动配色时，作为训练数据集或参考

替代项目

uiGradients、Gradient Hunt、CoolHue

项目介绍

webgradients 是设计创意领域的开源项目，由 itmeo 开发，2017 年首次发布。

在全站 13,090 个收录项目中，它的 GitHub 星标数（2,478）位列前 30%，在设计创意分类的 163 个项目里位列前 12%。

项目仍在小幅维护中，最近一次代码更新于 2026-09-21。完全免费，提供180个渐变配色，支持CSS、Figma、Sketch、PSD及JSON格式下载，无付费版本。从国内网络环境看，可直接访问。

它主要面向的使用场景是：网页或应用开发时快速挑选背景渐变。同类可对比的替代方案包括 uiGradients、Gradient Hunt、CoolHue。

上一篇：lobe-icons

下一篇：deepseek-design