实时预览
预设渐变
参数设置
CSS 代码
使用说明
CSS 渐变生成器支持线性渐变（linear-gradient）与径向渐变（radial-gradient）两种模式。通过添加多个颜色节点并调节位置，可以创建丰富的色彩过渡效果。生成的 CSS 代码可直接用于网页背景、按钮、卡片等元素的样式设计。点击预设模板可快速应用常用配色方案。
📖 CSS 渐变生成器使用指南
CSS 渐变生成器支持线性与径向两种渐变模式，拖动颜色节点、调整角度即可实时预览过渡效果，生成的 CSS 代码一键复制，直接用于背景、按钮与卡片样式。
🎯 功能特点
- 支持线性与径向两种 CSS 渐变模式自由切换。
- 颜色节点可自由增删，每个节点独立设置颜色与 0%–100% 位置。
- 线性渐变角度可调（如 90°），参数变化即时反映在预览区。
- 内置预设模板，点击即可套用常用配色方案再做微调。
📝 使用步骤
- 在「参数设置」中选择渐变类型：线性或径向。
- 调整颜色节点的色彩与位置百分比，需要更多层次就添加节点。
- 线性渐变可修改角度数值，同时观察左侧实时预览的变化。
- 满意后复制生成的 CSS 代码，粘贴到自己的样式表中。
💡 适用场景
- 为落地页头图设计品牌色渐变背景
- 给登录按钮制作 hover 前后的渐变过渡
- 快速试验多组配色后再抄录进项目样式表
❓ 常见问题
Q: 生成的代码兼容哪些浏览器？
输出的是标准 CSS 渐变语法，Chrome、Firefox、Edge、Safari 等现代浏览器均原生支持，无需再添加厂商前缀。
Q: 怎么做出三色以上的渐变效果？
在颜色节点区域继续添加节点，为每个节点分别指定颜色和位置百分比，节点越多渐变层次越平滑细腻。
Q: 渐变代码可以直接用在按钮上吗？
可以。把复制的 background 样式粘贴到按钮的 CSS 类中即可生效，配合 border-radius 圆角效果会更出色。
Q: 调好的配色方案会被保存下来吗？
页面不保存任何配置，刷新即恢复默认状态；满意的作品请及时复制代码到自己的项目中妥善保管。