工具说明
CSS 渐变让背景在多种颜色之间平滑过渡,无需任何图片,既轻量又能随屏幕缩放保持清晰。这个生成器让你可视化地拖动色标、调整角度和颜色,实时预览效果,再把对应的 `background` 代码一键复制走——省去反复手写 `linear-gradient()` 参数、刷新页面看效果的来回。
它支持线性渐变(linear-gradient,沿某个角度或方向过渡)和径向渐变(radial-gradient,从中心向外辐射)。你可以添加任意多个色标(color stop)并精确控制每个颜色出现的位置百分比。整个过程在浏览器里完成,生成的就是标准 CSS,可直接粘进任何项目使用。
使用步骤
- 选择渐变类型:线性(linear-gradient)或径向(radial-gradient)。
- 添加并设置色标——点击颜色块选色,拖动滑块调整每个颜色的位置百分比。
- 线性渐变可调整角度(如 `90deg` 表示从左到右);径向可调整辐射方向。
- 在实时预览区确认效果是否满意。
- 复制生成的 `background: linear-gradient(...)` 代码,粘贴到你的样式表。
适用场景
- 给按钮、卡片、Hero 区块做有质感的渐变背景。
- 做品牌色之间的过渡,统一页面视觉风格。
- 设计需要随屏幕缩放、不依赖图片的轻量背景(比图片省带宽)。
- 快速试验多个配色方案,实时对比哪种渐变更好看。
- 生成可直接交给前端的标准 CSS,避免设计与实现来回沟通。
常见问题
线性渐变的角度怎么理解?
角度指渐变进行的方向:`0deg` 是从下往上,`90deg` 是从左往右,`180deg` 是从上往下,依此顺时针。也可以用关键字方向,如 `to right`、`to bottom right`。生成器里调角度即可实时看到方向变化。
可以加超过两个颜色吗?
可以。CSS 渐变支持任意多个色标,你可以加 3 个、5 个甚至更多颜色,并分别指定它们的位置百分比来控制每段过渡的宽度。
径向渐变和线性渐变有什么区别?
线性渐变沿一条直线方向过渡(适合背景、按钮)。径向渐变从一个中心点向外圆形/椭圆形辐射(适合光晕、聚焦、球体高光效果)。两者语法相近,生成器里切换类型即可。