前端与设计
CSS 渐层产生器
linear / radial / conic
🔒 本地处理与外部服务的使用方式请查看本工具的隐私说明；网站统计服务另见隐私政策。
快速理解
CSS 渐层产生器可以怎么帮你？
免费 CSS gradient 渐层产生器，支援 linear/radial/conic 三种类型。即时预览 + 一键复制。
适合场景
适合比较线性、圆形径向与圆锥渐变的颜色、色标位置和方向，生成一条 CSS background 声明。它不是图片导出工具，也没有透明度、文字对比检查或任意渐变中心的编辑功能。
使用方式
初始为 90 度线性渐变，两个色标在 0% 和 100%。可改颜色、位置、类型或使用预设，再增加色标；至少保留两个色标。角度每次调 5 度，径向模式隐藏角度，因为该模式不用它。
结果怎么看
代码按色标百分比排序后生成，顺序可能不同于输入行。径向固定为 circle，圆锥中心固定在 50% 50%；复制结果已带 background: 和分号，放进实际样式规则后再检查不同尺寸下的效果。
隐私与限制
浏览器直接生成预览和 CSS，组件没有上传配色、调用图像接口或存储设计记录。复制按钮使用系统剪贴板，可能受浏览器权限限制；无法复制时，可从输出区域选取需要的样式文字。
色标位置限制为 0 到 100 的整数，超限值收至边界，小数去掉小数部分，空白暂按零预览。预览只呈现背景，不检查上方文字的对比度；使用时还应结合真实文字、元素大小和不同设备查看效果。
常见问题
conic 是什么？
锥形渐层，色彩绕中心点旋转。
radial vs linear？
linear 线性过渡；radial 从圆心扩散。