CSS 渐变生成器
可视化生成 CSS 线性、径向和锥形渐变。可添加多个颜色节点并复制 CSS。
工作台 · 中性环境
功能特性
线性 / 径向 / 锥形
多色标可调
角度与方向可调
实时预览并输出 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,或给外层包裹元素设置背景。
相关工具
CSS 圆角生成器
可视化打造 CSS border-radius —— 可单独控制四个角,也可统一控制。可实时预览。...
CSS Flexbox 演练场
学习并体验 CSS Flexbox。调整容器属性即可看到布局实时变化。...
CSS Grid 生成器
可视化创建 CSS Grid 布局。设置行、列和间距,并复制生成的 CSS 与 HTML。...
CSS 阴影生成器
用滑块可视化生成 CSS box-shadow 属性。可实时预览并复制 CSS 代码。...
百分比计算
解决常见的百分比问题:Y 的 X% 是多少、X 是 Y 的百分之几、百分比变化等。...
基础计算器
一个简单实用的在线计算器,支持加、减、乘、除四则运算,以及小数、正负号切换、百分比和计算历史记录。可以用屏幕上的按钮,也支持键盘输入。...
日期 / 时间计算
计算两个日期之间的差值,或从某个日期加减天数。...
年龄计算器
输入出生日期,精确计算你的年龄 —— 包括年、月、日,以及活了多少天、多少小时、多少分钟,距离下一个生日还有多少天。...