渐变生成器
在线CSS渐变生成工具，创建线性渐变、径向渐变，可视化调整并一键复制代码
预览
设置
颜色停止点
0%
100%
预设模板
CSS 代码
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);什么是CSS渐变？
CSS渐变（Gradient）是一种在两个或多个颜色之间平滑过渡的效果。线性渐变沿着直线方向过渡，径向渐变从中心点向外扩散过渡。渐变可以用于背景、按钮、卡片等元素，提升视觉效果。
使用方法
- 选择渐变类型：线性渐变或径向渐变
- 添加颜色停止点，调整每个颜色的位置
- 线性渐变可设置角度方向，径向渐变可设置中心位置
- 实时预览渐变效果
- 点击「复制代码」获取CSS代码
- 选择预设模板快速应用常见渐变
常见用途
- 网页背景：为页面或区块添加渐变背景
- 按钮样式：创建渐变按钮，提升视觉吸引力
- 卡片装饰：为卡片添加渐变边框或背景
- 品牌配色：使用品牌色创建渐变效果
- UI设计：快速生成渐变原型供设计参考
常见问题 (FAQ)
Q: 线性渐变和径向渐变有什么区别？
A: 线性渐变沿着指定角度的直线方向过渡颜色；径向渐变从中心点向外扩散过渡，类似圆形扩散效果。
Q: 颜色停止点的位置是什么意思？
A: 位置百分比表示颜色在渐变中出现的位置，0% 是起点，100% 是终点。例如两个颜色分别在 0% 和 50%，则前半段是第一个颜色到第二个颜色的过渡。
Q: 如何创建多色渐变？
A: 点击「添加颜色」按钮添加更多颜色停止点，每个颜色可以设置不同的位置，形成复杂的渐变效果。
Q: 生成的CSS代码如何使用？
A: 复制代码后，将其作为 background 或 background-image 属性值应用到CSS样式表中，例如：.element { background: linear-gradient(...); }