WebGradients 的替代品
6 个可以替代 WebGradients 的工具，1 个可完全替代、5 个部分替代。费用、登录、平台与可访问性都是本站实测或从官网核对的。
WebGradients
webgradients.com
免费的网页渐变背景库，收录 180 组双色渐变并标注色值，点一下即可复制跨浏览器 CSS3 代码，另附 Sketch、Photoshop、Figma 素材包，适合前端开发者做落地页和卡片背景时直接挑一组现成的。
工具免费不用登录网页英文国内可直接访问
对比
| 条目 | 费用 | 登录 | 平台 | 国内可直接访问 | 一句 |
|---|---|---|---|---|---|
 uiGradients |
免费 | 不用登录 | 网页 | 待检测 | 同样是免登录的渐变库，一页色卡带色值和可复制 CSS，覆盖挑渐变这一核心用途 |
 CSS Gradient |
免费 | 不用登录 | 网页 | 待检测 | 替代挑渐变这一块：可视化调色标和角度实时预览，但没有现成色卡库，得自己调 |
 毒蘑菇配色 |
— | — | 网页 | 待检测 | 替代渐变代码这一块：中文界面、附渐变色代码，但渐变数量与素材包不如本条全 |
 配色卡 |
— | 可选登录 | 网页 | 待检测 | 替代渐变挑选这一块：有渐变色卡可翻找，中文界面，但无 Sketch/PS/Figma 素材包 |
 ColorSpace |
— | — | 网页 | 待检测 | 替代渐变生成这一块：输入颜色生成双色三色渐变，但没有现成 180 组色卡可挑 |
 Colors and Fonts |
— | — | — | 待检测 | 替代渐变与配色这一块：提供渐变工具和可访问性检查，但无成组渐变库和设计素材包 |
详细介绍
可完全替代 1
部分替代 5
CSS Gradient
Designstripe 出品的免费在线 CSS 渐变生成器，可视化调整线性与径向渐变的色标、角度并实时预览，复制标准代码即可用，还附色板、样本与教程，适合给网页或博客配背景时不想在代码里盲调的前端和设计师。替代挑渐变这一块：可视化调色标和角度实时预览，但没有现成色卡库，得自己调
毒蘑菇配色
中文在线配色站，按四色色卡陈列并标注十六进制色值，另提供可直接粘贴的渐变色与边框阴影代码和图片取色，适合前端写页面时找一组协调的主色和辅助色。替代渐变代码这一块：中文界面、附渐变色代码，但渐变数量与素材包不如本条全
配色卡
在线配色工具站，把成组颜色做成带编号和主题名的配色卡，可按编号翻找，另设渐变色卡、智能配色、在线取色与入门教程，适合做海报、网页、PPT 却拿不准颜色怎么搭时先来翻几张现成搭配。替代渐变挑选这一块：有渐变色卡可翻找，中文界面，但无 Sketch/PS/Figma 素材包
ColorSpace
在线配色生成器，输入一个颜色即可生成多组可直接使用的配色方案，并提供双色与三色渐变工具，无需注册，适合设计师和前端开发者做网页或界面时配色未定、想先看几组方案再挑。替代渐变生成这一块：输入颜色生成双色三色渐变，但没有现成 180 组色卡可挑
Colors and Fonts
面向设计师、前端开发者以及任何需要精准配色的用户的在线工具平台，旨在提供快速、直观的配色、渐变、颜色转换和可访问性检查等功能，帮助用户在项目中快速生成和管理颜色方案。替代渐变与配色这一块：提供渐变工具和可访问性检查，但无成组渐变库和设计素材包
还有：Grabient（未收录）