🌈 CSS 渐变生成器

可视化编辑 linear / radial / conic 渐变。自由添加或删除色标并复制 CSS 代码。

完全免费无需注册浏览器内完成 5 种语言深色模式

🔒 关于隐私

・浏览器内处理
・输入数据绝不会发送到任何服务器
・无存储日志、无历史、无数据库
・无需注册、登录或付款

类型

角度 (90deg)

色标

预设

CSS

📖 常见的坑

可视化编辑 linear / radial / conic 各类渐变，并导出可直接粘贴的 CSS。此处输出的是默认的 sRGB 插值代码，浏览器把两色之间按红、绿、蓝各通道等距分割来连接。这并不符合人眼观察色带的方式——中间色发灰与出现色带条纹，几乎都源自这一点。

情形	会发生什么	怎么处理
中间出现发灰的带	把色相环上相对的两个颜色（例如蓝 → 黄）连起来，中间的饱和度会掉下去而发浑。sRGB 的线性插值会把 `rgb(0 0 255)` 与 `rgb(255 255 0)` 的中点算作 `rgb(128 128 128)`——正好是灰色。设计工具的观感与 CSS 结果对不上，原因也在这里：Figma 或 Illustrator 可能是在别的色彩空间里插值的。	最稳妥的办法是在中间多加一个色标：蓝 → 黄的话，在中央放一个绿色或青色，就会沿着色相环自然过渡。在支持度允许的场合，指定插值色彩空间才是正解——`linear-gradient(in oklch 90deg, blue, yellow)`，因为 `oklab` / `oklch` 的明度符合知觉，不会发浑。但要注意 Safari 16.2 以下与较旧的 Android WebView 会把整条声明丢弃，导致背景完全消失，所以请先写 sRGB 版本再覆盖。
大面积使用时能看到条纹（色带）	每个通道只有 0~255 共 256 级。把明度差很小的渐变铺满 1920px 的屏宽，每一级就是 7~8px 的带，接缝宽到能被看成线。暗色下最明显：人眼恰恰对暗部差异最敏感，而 sRGB 编码分配给暗部的级数却最少。首屏大图背景和模态框遮罩最常中招。	叠一层极淡的噪点是标准解法：在上面铺一张 100~200px 见方、不透明度 2~4% 的透明 PNG，如 `background-image: url(noise.png), linear-gradient(...)`，阶梯的边界就会被视觉打散而看不见。把 SVG 的 `feTurbulence` 以 data URI 内嵌，还能省下一个图片请求。另一个手段是缩短渐变的跨度——把渐变限制在约 300px 高而非满屏，多数情况就消失了。增加色标数量没有用，因为根源是可用的级数不够。
一改变元素尺寸，外观就变了	`radial-gradient` 的默认值是 `ellipse farthest-corner`：它每次都会被重新缩放，以拉伸到盒子的宽高比，并让最后一个颜色终止在最远的那个角。在卡片上还是漂亮的正圆，到了宽幅首屏区域就成了扁椭圆，在移动端又变成竖长的。`conic-gradient` 也一样——非正方形容器里的饼图会变成椭圆。用 `%` 指定的色标同理，因为百分比是相对元素尺寸计算的。	想保持正圆，请明确写成 `radial-gradient(circle at center, …)`。终止形状还可选 `closest-side` / `farthest-side` / `closest-corner`；若完全不想依赖元素宽度，用 `circle 200px at center` 这样的绝对尺寸最可预测。用 `conic-gradient` 做饼图时，请配合 `aspect-ratio: 1`。验证时务必真的去拖动浏览器宽度——只看固定宽度的预览，绝对发现不了这类崩坏。

渐变属于 background-image，而不是 background-color。用简写 background: linear-gradient(...) 会把此前的 background-color 重置为 transparent，连带失去图片加载失败时的兜底颜色，所以请先单独一行声明 background-color。其次，渐隐到透明时不要写关键字 transparent：在 sRGB 中它等于 rgba(0,0,0,0)，也就是透明的黑，因此白色 → transparent 中途会经过灰。应当把同一颜色的不透明度降到 0，写成 rgb(255 255 255 / 0)。最后，浏览器打印时默认不输出背景图——渐变上叠白字的标题，一打印就成了白纸白字，直接消失。

📖 使用方法

1

选择类型

选择 linear / radial 或 conic。
2

编辑色标

选择颜色和位置。可添加或删除。
3

复制 CSS

将生成的 CSS 粘贴到 background 属性。

❓ 常见问题

我的数据会发送到服务器吗？

不会。一切都在您的浏览器中运行。

浏览器支持情况？

linear / radial 全部支持。conic 需 Chrome 69+ 等。

可以添加多少个色标？

无上限。实用上 2 至 10 个。

🔗 相关工具

🐛 此工具出现问题了吗？

免费、无需注册。仅提供复现步骤也有帮助。报告将直接发送给运营者并用于改进。