webgradients

前端开发者与UI设计师在需要生产级背景渐变时，直接打开 WebGradients 即可浏览、复制 CSS 代码，无需再开设计工具调色。

它提供了什么

WebGradients 收录了 180 个线性渐变，每个渐变都有独立的详情页，展示 CSS 代码、HEX 和 RGB 值，并支持视觉预览。所有渐变按序号排列，从“Warm Flame”到“Sand Strike”，每个都附带两个色值及“Copy CSS”按钮。

• 180 个渐变：全部为线性渐变，覆盖暖色、冷色、中性色系
• CSS 代码一键复制：每个渐变旁都有“Copy CSS”按钮，点击即复制跨浏览器兼容的 CSS3 代码
• 独立渐变详情页：每个渐变有单独页面，展示 CSS、HEX、RGB 及相近配色推荐
• 额外文件包：提供每个渐变的 .PNG 版本，以及 Sketch、Photoshop、Figma 的专用资源包

适合谁用

项目由 itmeo 团队维护，最初由产品设计师 Dima Braven 在 2016 年作为个人副业创建，现已发展为被数百万次访问的免费设计资源。目标用户是需要在落地页、应用界面、演示文稿或设计系统中快速使用渐变背景的设计师和前端开发者。

• UI/UX 设计师：在 Sketch、Photoshop、Figma 中使用专用资源包
• 产品经理与营销人员：为 Hero 区、Banner 或邮件模板快速选色
• 开源社区：GitHub 仓库持续维护，接受贡献

怎么使用

在首页浏览全部 180 个渐变缩略图，点击任一渐变进入详情页，可查看 CSS、HEX 和 RGB 值，并复制代码。也可直接下载 .PNG 或设计工具专用包，导入 Sketch、Photoshop 或 Figma 中使用。

• 浏览与筛选：首页按序号排列，无分类筛选，但支持快速视觉扫描
• 复制代码：每个渐变缩略图下方都有“Copy CSS”按钮，无需进入详情页
• 下载资源包：网站提供 Sketch、Photoshop、Figma 的渐变预设包，一次性导入
• GitHub 项目：可在 GitHub 上查看源码、提交问题或下载离线版本

收费与限制

WebGradients 完全免费，包括商业和个人用途。项目由 itmeo 团队维护，网站顶部有广告位（面向设计师和前端开发者），但核心功能无任何付费墙。

• 免费使用：所有 180 个渐变均可免费用于商业或个人项目
• 无注册要求：无需登录即可浏览和复制代码
• 广告支持：网站顶部有“Advertise on WebGradients”链接，但广告不影响内容使用
• 无 API：当前不提供程序化接口，仅通过网页和资源包分发

与同类工具的差异

相比 CSS Gradient、Grabient 等工具，WebGradients 的独特之处在于它提供的是经过精选的固定渐变集合，而非生成器。每个渐变都有命名和序号，便于团队沟通时引用（如“使用 Warm Flame 渐变”）。同时提供 Sketch、Photoshop、Figma 原生资源包，适合设计系统的一致性管理。

• 固定集合 vs 生成器：不是渐变生成器，而是 180 个预设渐变，保证一致性
• 命名体系：每个渐变有独特名称（如“Night Fade”“Juicy Peach”），方便设计文档引用
• 设计工具集成：提供 Sketch、Photoshop、Figma 的预设包，可直接导入

常见问题

Q1：WebGradients 的 180 个渐变可以商用吗？

A1：可以。官网明确标注“Free for commercial or personal use”，由 Dima Braven 授权，无需额外付费或署名。

Q2：如何将 WebGradients 的渐变导入 Figma？

A2：网站提供 Figma 专用资源包（在首页和 About 页面均有下载链接），下载后可在 Figma 中作为样式库导入，直接应用渐变到图层。

Q3：WebGradients 的渐变代码兼容哪些浏览器？

A3：官网说明为“CSS3 crossbrowser code”，即使用标准 CSS3 渐变语法，兼容现代浏览器（Chrome、Firefox、Safari、Edge）及部分旧版浏览器。

更多同类工具与网站,可在颜色搭配分类继续挑选。

信息核实于 2026年7月,具体以官网为准。