简介
CSS Gradient 是一个不用装设计软件的渐变入口：要给页面、卡片或按钮加一层渐变背景，在这里取色、加色标、定角度，下方直接给出能粘贴的 CSS。它替代的是「在设计软件里拉一个渐变、导出截图、再对着手写 linear-gradient」这条来回折腾的路径——调参与出码在同一屏，改一个色标就能判断这层渐变铺在正文后面会不会压字。
站内不只是生成器：预设区列了 Vital Ocean、Kale Salad、Disco Club 等 15 个命名渐变，另有粉、黄、红、蓝、绿、紫 6 个色阶页和一批渐变教程，缺配色思路时可以把现成的一组拆开看构成。默认示例是三色标、90 度，代码区第一行是纯色 background: #2A7B9B; 兜底，第二行才是 linear-gradient 主体。
适用人群
最适合自己写前端、常要给落地页与卡片配背景的人：不必打开设计软件，也不用记 linear-gradient 的语法，取色、定角度、复制代码一次完成；做 WordPress 主题二次开发或维护老项目的人也用得上，兼容开关会一并给出纯色兜底。反过来，需要位图封面、社交图或 PPT 背景的人不必用，这里只出 CSS 代码、不导出图片；想把调好的渐变存成团队素材库的也不必来，站内没有账号体系，配色存不下来。
优缺点
- ✅ 打开首页就是编辑器，不用注册登录，省掉一道门槛。
- ✅ 调参与出码在同一屏，改一个色标就立刻看到效果，试错成本低。
- ✅ 输出的是标准 CSS，粘到静态站、主题模板或组件里都能直接用。
- ✅ 案例页按真实产品展示渐变落地效果，缺结构时照着抄比自己凭空想快。
- ❌ 没有账号体系，调好的配色存不下来，换台设备要重调。
- ❌ 只出代码不导出图片，页面上还挂着多套广告与统计脚本，首屏加载偏慢。
使用方法
- 起步不需要账号：打开首页就是编辑器，左上预览区显示渐变效果，右上在 Linear 与 Radial 之间切换，旁边填角度（默认 90 度）——这一步定的是渐变方向，径向适合做光斑或卡片高光。
- 在 PICKER 面板取色，或直接在 HEX 框粘贴色值；R、G、B 三个数值框与 A 通道能按通道微调，A 用来压透明度，给图片叠渐变蒙层时靠它控制压暗程度。
- Stops 面板逐行管理色标：每行一个颜色、一个位置百分比和一个删除按钮；增加色标能拉长过渡，把两个色标压到同一位置就得到硬边色带，做条纹与色块背景靠这个技巧。
- 拿代码：CSS 区第一行是纯色 background 兜底，第二行是 linear-gradient 主体，要兼容老浏览器就勾 Max compatibility (IE6+)，再点 Copy to clipboard 复制整段。
- 进阶做法是把配色沉淀成变量：先从预设里取一组起点，改完色标把十六进制值抄进 :root 的自定义属性，之后做卡片和按钮只改角度与透明度，整站渐变同源；注意径向渐变放进窄容器会被裁成意外形状，先在目标尺寸的容器里试再定稿。
收费说明
结论：完全免费，也不需要注册。生成、复制代码、翻预设与色阶页、读教程都能直接做完，站内没有价目表、订阅入口或付费墙，也没有按次导出之类的额度限制。变现方式是展示广告——页面上挂了 Amazon 广告位与 pub.network、btloader 这类广告与同意管理脚本，广告只在编辑器外围，不挡操作。生成的是标准 CSS 代码，粘走即用，不涉及账号授权或导出付费；商用前按自家项目的素材合规要求确认配色来源即可，同团队的 Cool Backgrounds 也是独立免费入口。
平台支持
形态是网站与在线应用，纯浏览器端运行，不用装客户端也没有手机 App；编辑器按响应式排布，手机能打开并复制代码，但色标与角度这类微调还是在桌面上顺手。国内可以直连打开，不需要自备代理；页面依赖的墙外资源集中在广告与统计（Amazon 广告、Google 统计脚本），被拦掉时编辑器照常出码，只是页面更清爽。站内没有账号体系，也不强制 Google 或 Apple 登录；不提供 API、CLI、自托管与离线包，要批量出渐变只能自己拼 linear-gradient 语法或写脚本生成。
截图
