CSS 渐变生成器
可视化调整渐变，然后复制适用于所有现代浏览器的 CSS。
已封存在本设备上
在浏览器中运行，不上传任何内容。
已封存
预览
色标
拖动色标，或选中后用方向键移动。点击渐变条可添加色标。
设置
OKLCH 和 OKLab 能避免某些渐变中间出现的灰暗区域。代码中也包含标准版本，兼容旧浏览器。
从预设开始
CSS 代码
使用方法
-
选择类型
选择线性、径向或锥形渐变，或从预设开始，再设置角度或中心。
-
编辑颜色
沿渐变条拖动色标，点击渐变条添加更多色标，并修改每个色标的颜色和位置。
-
复制 CSS
复制生成的代码，作为背景粘贴到你的样式表中。
常见问题
线性、径向和锥形渐变有什么区别？
线性渐变沿你选择角度的直线变化颜色。径向渐变从中心点向外以圆形或椭圆扩散。锥形渐变像时钟指针一样绕中心点旋转，很适合制作色轮和饼图。
生成的 CSS 在所有浏览器中都能用吗？
线性、径向和锥形渐变在所有当前主流浏览器中都能使用。选择 OKLCH 或 OKLab 混合时，代码会先加一行标准写法，让旧浏览器也能显示渐变。
为什么我的渐变中间发灰？
在标准 sRGB 空间中混合两种差别很大的颜色，中间常常会经过一段浑浊的灰色。把混合方式切换为 OKLCH 或 OKLab：颜色会按照人眼的感知方式混合，中间部分依然明亮。
可以使用半透明颜色吗？
可以。在色标的颜色框中输入带透明度的颜色，例如 rgb(52 66 217 / 0.4) 或 #3442d966。很适合叠加在图片上方的遮罩。
最多可以添加多少个色标？
需要多少就加多少。每个色标都可以用鼠标、触摸或方向键移动，只要还剩至少两个色标，就可以删除。