180 款 CSS 渐变
一次性收录 180 款线性渐变，全部是调好的起止色对，无需自己搭配颜色。以卡片墙形式铺开，每一张都能直接预览实际观感。
价格免费，个人与商业用途均可
平台Web
归类其他 AI 工具
收录2026-10-12
复核2026-10-12
编辑评分
4.3 / 5
★★★★☆
WebGradients编辑总结
WebGradients 是设计师 Dima Braven 做的免费 CSS 渐变合集，收录 180 款线性渐变，可用于网站任何位置的内容背景。每个渐变都提供一个「Copy CSS」按钮，点一下就把跨浏览器兼容的 CSS3 代码复制到剪贴板，粘贴即可使用，个人和商业用途都免费。额外提供 Sketch、Photoshop、Figma 三种打包文件下载，以及一个用来预览配色效果的 Color Palette 工具。短板是它只覆盖线性渐变这一种形式，没有径向渐变、网格渐变和更多可视化编辑能力。
WebGradients是什么？
WebGradients 是一个免费的 CSS 渐变素材库，由 Dima Braven 制作。它面向需要给网页、落地页或设计稿快速铺背景色的人，核心资产是一批已经调好的线性渐变，可以直接拿来当网站任意位置的内容背景。
网站把每个渐变渲染成一张卡片，卡片下方标注起止两个十六进制色值，例如 #ff9a9e → #fad0c4、#667eea → #764ba2。每张卡片都带一个「Copy CSS」按钮，点击后复制的是跨浏览器兼容的 CSS3 代码，粘贴到样式表里就能生效。除了网页用的代码，合集还打包了 Sketch、Photoshop 和 Figma 三种格式，方便在图形软件里直接调用。
站内另有 Color Palette 工具，作用是让你在真实落地页版式里查看整套配色系统的效果，避免只看单张色卡时判断失误。个人和商业使用都免费。
WebGradients核心功能
一键复制 CSS
每张渐变卡片都配一个「Copy CSS」按钮，点击后复制的代码是跨浏览器兼容的 CSS3 写法，粘贴进样式表立即生效，不用手动改写浏览器前缀。
色值明码标注
每个渐变都标出起点与终点的十六进制色值，例如 #84fab0 → #8fd3f4。想微调或迁移到别的工具时，照着色值重建即可。
设计软件打包
除网页代码外另提供 Sketch、Photoshop 和 Figma 三种打包文件下载，把同一批渐变搬进图形软件，网页实现与设计稿可以共用一套颜色。
Color Palette 工具
用来在真实落地页版式中查看一套颜色系统的呈现效果，比只看单张色卡更容易判断整套配色放在实际页面里是否协调。
WebGradients值不值得用？
当你只需要一条现成的线性渐变给页面或落地页铺背景时，WebGradients 值得收藏：180 款随手可挑，点一下复制 CSS 就能粘进项目，个人和商用都免费，还附带 Sketch、Photoshop、Figma 打包文件。做营销页、个人站、产品官网的主视觉时，它的效率比在调色盘里反复试色高得多。但如果你要的是径向渐变、网格渐变，或者想在浏览器里拖动控制点自定义渐变，它帮不上忙，得换专门的渐变编辑器。另外它本质是素材库而非设计工具，不做色彩管理，也不承诺任何可访问性对比度指标，正文排版用色还得自己把关。
建议选它的情况
- 需要给落地页或营销页快速铺一条现成渐变背景
- 希望网页和设计稿共用同一套渐变，需要 Sketch、Photoshop、Figma 打包
- 只想点一下复制跨浏览器 CSS3 代码，不想自己写浏览器前缀
- 个人项目或商业项目都做，要求素材可免费使用
不建议选它的情况
- 需要径向渐变、网格渐变等线性渐变之外的形式
- 需要在浏览器里拖动节点自定义渐变角度与色停
- 需要色彩管理或对比度可访问性校验等专业能力
WebGradients使用建议
入门先把路子走对
- 先筛后复制打开首页就是整面渐变卡片墙，先滚动浏览锁定两三款再逐个点「Copy CSS」，比边看边复制省时间，也不容易把剪贴板弄乱。
- 按色值找同族每张卡片都标着起止色值，想找同一色系的变体就照着十六进制值在页面上翻，比凭眼睛一张张看更准。
- 把色值记下来点复制之前先把两个色值抄进项目文档，之后要在别处复用同一渐变时不用再回来翻页面。
进阶省时间也省钱
- 先跑 Color Palette拿不定整套配色是否协调时，先用 Color Palette 工具在真实落地页版式里看一遍，确认后再把渐变搬进项目，避免做完再返工。
- 设计软件包统一颜色团队里设计师用 Sketch、Photoshop 或 Figma 时，直接下载对应打包文件，让设计稿和网页实现用同一批渐变，减少来回对色。
- 避开极端浅色对像 #fdfbfb → #ebedee 这类低对比渐变做背景时，正文文字容易看不清，建议只用于分隔区块或大面积留白区域。
WebGradients适合谁用？
独立开发者做官网
推荐一个人包办产品站和落地页，需要现成背景色又不想花时间配色，180 款里挑一款复制 CSS 就能上线。
营销页与活动页设计
推荐常做短期上线的活动页，对背景色迭代速度要求高，一键复制加设计软件打包能明显缩短出稿时间。
前端工程师搭原型
推荐做内部演示或原型时想快速铺一层有质感的背景，复制 CSS 即可，不用引入额外依赖。
需要自定义渐变的设计师
不推荐如果工作要求拖动节点调角度、调色停位置，这里只提供固定配色，得改用专门的渐变编辑器。
对无障碍有硬性要求的团队
有条件合集本身不标注对比度数据，用它做正文背景时需要自己另做可访问性校验。
WebGradients优点和缺点
优点
- 180 款渐变全部现成，覆盖不同色系，挑款即可用
- 每款都配「Copy CSS」，复制的是跨浏览器兼容的 CSS3 代码
- 每个渐变标出起止十六进制色值，便于微调与迁移
- 另送 Sketch、Photoshop、Figma 三种打包文件
- 个人与商业用途均免费，署名 Dima Braven
缺点
- 只覆盖线性渐变，没有径向与网格渐变
- 没有可视化编辑器，不能拖动节点自定义渐变
- 不标注对比度等可访问性数据，正文用色需自行校验
- 本质是素材库，不含色彩管理或团队协作功能
WebGradients关键指标
| 指标 | 数值 | 数据来源 |
|---|---|---|
| 渐变数量 | 180 | WebGradients 首页介绍 |
| 设计软件打包格式 | Sketch、Photoshop、Figma | WebGradients 首页介绍 |
WebGradients常见问题
WebGradients 收费吗？＋
不收费。这一整套渐变对个人和商业用途都免费，页面顶部就写明 Free for commercial or personal use，可以直接拿去做客户项目或商业产品，不需要付费解锁，也没有需要购买的进阶档位。
一共提供多少款渐变？＋
合集一共收录 180 款 CSS 渐变，首页以卡片墙形式全部铺开，每张卡片配一个「Copy CSS」按钮和一组起止色值，翻完整面墙就能看完全部款式。
复制出来的代码能直接用吗？＋
可以。点击「Copy CSS」复制的是跨浏览器兼容的 CSS3 代码，粘进样式表即刻生效，不需要自己补浏览器前缀，也不依赖任何构建工具或第三方库。
除了网页代码，还有别的格式吗？＋
有。除 CSS 代码外还提供 Sketch、Photoshop 和 Figma 三种打包文件，下载后可以在对应设计软件里直接调用同一批渐变，适合让设计稿与网页实现保持一致。
能自己调整渐变角度或颜色吗？＋
站内没有可视化的编辑功能，提供的是固定起止色对的现成渐变，不能拖动节点改角度或增删色停。需要定制时，可以把卡片上的两个十六进制色值抄下来，拿到自己熟悉的编辑器里重建。
怎么做出来的？＋
作者是 Dima Braven，收录的 180 款渐变全部以起止色值成对给出，例如 #ff9a9e 到 #fad0c4、#667eea 到 #764ba2，每款都渲染成实际效果的卡片供对照挑选。
