CSS渐变生成器

怎么用

1. 选择渐变类型
   在「渐变类型」中选线性、径向或锥形；不同类型会展示对应的专属参数。
2. 调节渐变参数
   线性拖「角度」；径向选「形状/大小/中心位置」；锥形设「起始角」。
3. 编辑色标
   每个色标可改颜色、拖位置滑杆，点「✕」删除、「＋ 添加色标」新增（最多 8 个）。
4. 可选：循环渐变
   勾选「repeating 循环」把渐变变成重复条纹，常用于进度条、装饰边框。
5. 复制代码
   预览满意后点「📋 复制 CSS」，把 background 声明粘贴进样式表即可。

使用技巧

• 线性渐变 135deg（左上到右下）是最常用的对角方向，比默认的 to bottom 更有层次。
• 色标位置不必从 0% 开始：让两色交叠区间变窄可以做出更「锐利」的过渡。
• repeating + 两个邻近色标（如 0% 和 10%）能做出条纹、斑马线效果。
• 锥形渐变配合 conic-gradient(from 0deg, #eee 0 25%, #667eea 0 100%) 是画饼图/环形进度的利器。
• 页面做暗色系时，给渐变外层再叠一层半透明黑（rgba(0,0,0,.2)）能快速压暗整体。

更新记录

• v1.0 2026-09-16 首次上线：线性/径向/锥形三种渐变、角度形状位置可视化调节、最多 8 色标增删、repeating 循环渐变、精选模板与随机配色、一键复制 CSS。

常见问题