在线CSS渐变生成器
渐变预览
linear-gradient(135deg, #667eea 0%, #764ba2 100%)渐变类型
方向
135°
颜色节点
预设渐变
紫蓝
橙红
海洋
日落
森林
暗夜
极光
火焰
星空
彩虹
薄荷
深蓝
粉蓝
金属
径向光晕
径向日出
锥形色轮
锥形饼图
CSS渐变生成器使用说明
在线CSS渐变生成器，可视化生成线性渐变、径向渐变、锥形渐变CSS代码，支持自定义颜色节点、方向角度、预设渐变模板，前端开发者必备工具。
功能特点
- 支持线性渐变(linear-gradient)、径向渐变(radial-gradient)、锥形渐变(conic-gradient)
- 可视化角度/方向调节
- 自由添加/删除颜色节点，支持透明度
- 20+精选预设渐变模板
- 实时预览渐变效果
- 一键复制CSS代码
使用步骤
- 选择渐变类型（线性/径向/锥形）
- 调整方向、角度或形状
- 添加或修改颜色节点，拖动滑块调整位置
- 也可点击预设渐变快速应用
- 点击"复制CSS"按钮复制渐变代码
常见问题
线性渐变和径向渐变有什么区别？
线性渐变沿一条直线方向过渡颜色，适合背景条、分隔线等；径向渐变从一个中心点向外辐射过渡颜色，适合按钮高光、聚光灯效果等。
锥形渐变是什么？
锥形渐变(conic-gradient)颜色围绕中心点旋转过渡，像色轮一样，适合饼图、色盘等场景，CSS3新特性。
如何让渐变有透明效果？
点击颜色选择器中的透明度条，设置Alpha值，或者使用rgba格式的颜色值即可实现半透明渐变。
CSS渐变兼容性如何？
现代浏览器均支持linear-gradient和radial-gradient，conic-gradient在Chrome 69+、Firefox 83+、Safari 12.1+支持。旧浏览器可加-webkit-前缀。