CSS 渐变生成器

可视化生成 CSS 线性、径向和锥形渐变。可添加多个颜色节点并复制 CSS。

工作台 · 中性环境
90°

  

功能特性

线性 / 径向 / 锥形
多色标可调
角度与方向可调
实时预览并输出 CSS

使用方法

1. 选择渐变类型和角度,台面会全尺寸实时预览。

2. 拖动轨道上的手柄移动色标,点击轨道空白处添加(最多六个),或用色井和百分比输入框微调。

3. 复制生成的 CSS —— 在棋盘格底色上检查透明过渡处是否有色带。

关于这个工具

CSS 渐变无需图片文件就能绘制平滑的颜色过渡,任何尺寸下都清晰,而且不用额外下载。这个生成器支持三种原生类型:沿指定角度变化的 linear-gradient、从中心向外扩散的 radial-gradient,以及像色轮一样绕中心旋转的 conic-gradient。拖动轨道上的手柄移动色标,点击轨道空白处添加色标(最多六个),也可以在输入框里精确调整颜色和位置。舞台以全尺寸预览效果,透明棋盘背景能暴露色带或意外的透明区域。输出是所有现代浏览器都支持的标准 CSS,可直接粘贴到 background 或 background-image 声明中。

常见问题

线性、径向和锥形渐变有什么区别?
线性渐变沿某个角度的直线变色;径向渐变从中心点以圆形或椭圆向外扩散;锥形渐变让颜色绕中心点旋转,适合做饼图和色轮。
渐变角度怎么理解?
0deg 指向上方,90deg 指向右边,180deg 指向下方,270deg 指向左边。所以 linear-gradient(90deg, red, blue) 左边是红色,右边是蓝色。
为什么渐变出现明显的色带?
两个相近的颜色铺满大面积时就容易出现色带,在 8 位色深的显示器上尤其明显。增加一个中间色标、选择对比更大的颜色,或叠加轻微的噪点纹理都有帮助。
渐变里能包含透明吗?
可以,使用带透明度的颜色,例如 rgba 或 8 位 HEX。注意在某些情况下渐变到关键字 transparent 会让中间发灰,渐变到同一颜色的零透明度版本效果更干净。
能把渐变用在文字颜色或边框上吗?
可以,但需要额外的 CSS。文字:把渐变设为背景,再使用 background-clip: text 并把文字颜色设为透明。边框:常用 border-image,或给外层包裹元素设置背景。

相关工具