CSS 渐变代码生成器
通过色标拖拽与参数面板实时预览，输出可直接粘贴到样式表的 CSS gradient 声明
永久免费本地计算 · 零上传
🔒 全程在浏览器内计算，输入内容不会离开您的设备。
怎么用
- 选择渐变类型（线性/径向/锥形/重复）
- 添加或拖动色标并调整位置百分比
- 修改角度、圆心或半径等几何参数
- 在预览区确认效果后复制生成的 CSS 代码
典型场景
设计师交付渐变色值后前端快速还原
制作落地页背景或 CTA 按钮的渐变效果
调试多段渐变的色标间距和过渡平滑度
常见问题
支持几种 CSS 渐变类型？
线性渐变、径向渐变、锥形渐变及各自的重复变体共六种。
能否保存正在编辑的渐变方案？
支持导出当前色标与参数配置为 JSON，下次粘贴即可恢复。
生成的代码兼容哪些浏览器？
覆盖 Chrome、Firefox、Safari、Edge 等主流内核，无需额外前缀。