CSS 渐变生成器让你拖滑块、点色标就调出漂亮的 linear-gradient 线性渐变或 radial-gradient 径向渐变：随意增删色标、拖动位置、改角度，实时大图预览，一键复制可直接粘进 background 的 CSS。Shape Cat纯前端、不依赖任何框架，渐变全在你浏览器里算。 CSS 渐变怎么写才好看又好用？ CSS 渐变本质是「在两个或多个颜色之间做插值」，写法上它是一个图像（image），所以放在 background 或 background-image 上，而不是 background-color。最常用的是 linear-gradient(角度, 颜色1 位置1, 颜色2 位置2…)：角度 0deg 是从下往上、90deg 是从左往右、180deg 是从上往下，到 135deg 这种斜向最常见于卡片和按钮背景。径向渐变 radial-gradient 则从一个圆心向外扩散，适合做聚光灯、光晕、球面高光这类效果，circle 是正圆、ellipse 会随容器比例拉伸。Shape Cat把这些参数都做成可视控件，你不用记语法，拖一拖就出来。 让渐变「高级」的关键不在颜色多，而在颜色之间的过渡是否自然。两个色相差太远（比如纯红直接到纯绿）中间会出现发灰的「脏色带」；解决办法是让相邻色标的色相、明度尽量接近，或在中间加一个过渡色标。色标的位置（color stop）决定了每段过渡的占比——把两个色标拉近，过渡就变陡、接近一条硬边界；拉远则过渡更柔和。想做「双色对半分」的色块，就把两个色标放在同一个百分比上制造硬切。这些都能在Shape Cat里实时拖出来看效果，省去反复改代码刷新的来回。 拿到渐变后，落地有几个实用技巧：一是把渐变存成 CSS 变量（如 --hero-grad），多处复用、改主题只改一处；二是渐变可以叠加，用逗号分隔多个 background 图层能做出网格、光斑等复合纹理；三是注意可访问性——渐变背景上的文字要保证对比度，深色渐变配浅字、浅色渐变配深字，必要时加一层半透明遮罩压一下。Shape Cat输出的是标准 background 值，复制即用，全程在你浏览器本地完成，不上传、不注册、无次数限制。 1 选渐变类型：线性 linear 或 径向 radial。 2 线性渐变拖「角度」滑块定方向；径向渐变选形状与圆心位置。 3 点「+ 加色标」增加颜色，拖动每个色标的位置滑块、改颜色，多余的点 × 删掉。 4 看上方实时预览，满意后点「复制 CSS」粘进你的 background。 为什么用Shape CatCSS 渐变生成？ 多色标自由编辑：随意加减颜色与位置，不限两色，做复杂渐变也顺手。 线性 + 径向一站搞定：角度、形状、圆心都能调，输出标准 background 值。 所见即所得 + 本地运算：参数一动预览立刻变，纯浏览器、不上传、复制即用。

渐变要写在 background 还是 background-color？ 写在 background（或 background-image）。渐变在 CSS 里被当作一张图像，background-color 只接受纯色，把渐变放进去不会生效。Shape Cat复制出的就是 background 值，直接粘贴即可。 点「+ 加色标」即可新增一个色标，再拖动它的位置滑块和颜色。色标数量不限，删除点色标旁的 × 即可。 角度指渐变推进的方向：0deg 自下而上、90deg 自左向右、180deg 自上而下、270deg 自右向左；135deg 这类斜角最常用于卡片背景。拖动角度滑块时预览会实时转向。 和其它在线渐变生成器比，有什么不同？ 很多老牌渐变站界面陈旧、夹广告、还要你在弹窗里点半天。Shape Cat线性 + 径向同站、多色标自由增删、实时大图预览、纯前端本地运算无广告无追踪，复制出的是干净的标准 background 值。要顺手出一段能直接粘的现代渐变 CSS，Shape Cat更省心。 更新于 2026-06-05 · Shape Cat团队 Shape Cat editorial desk Brand asset review 浏览器的 Canvas 与 SVG 导出 API 站内工具维护的配色与排版启发式规则 用户输入的品牌名、颜色与 prompt 品牌套件只是创意起点，不构成商标、无障碍或品牌策略方面的建议。正式启用前，请自行确认对比度、字体授权与法律合规。