🎯 工具功能
在线CSS渐变生成器是一款可视化CSS渐变背景设计工具，支持线性渐变（Linear Gradient）和径向渐变（Radial Gradient）两种模式的编辑与实时预览。通过直观的图形化界面，你可以轻松调整渐变方向、颜色节点、过渡位置、颜色值和不透明度，无需手写任何CSS代码即可生成专业级的渐变背景。本工具支持预设渐变模板、多颜色节点编辑、角度精确控制、一键复制CSS代码和颜色值调整，是网页设计师和前端开发者的高效辅助工具。
使用在线CSS渐变生成器 — 线性/径向渐变，您可以轻松完成以下操作。
💡 渐变的魔力：CSS渐变是设计趋势中最重要的视觉元素之一。从iOS系统的磨砂玻璃效果到现代网站的彩色渐变背景，渐变在UI设计中扮演着创造深度和层次感的关键角色。一个好的渐变设计能让你的页面从平淡无奇变得引人注目。
📖 使用教程
场景：为网站Hero区域设计一个渐变色背景
1
选择渐变类型和方向 — 在工具中选择「线性渐变」模式。通过点击方向按钮或拖动角度滑块，将渐变角度设置为 135度（从左上到右下）。你也可以直接输入精确的角度值，0度对应从上到下，90度对应从左到右。
2
设置颜色节点 — 默认有两个颜色节点：起始色和结束色。点击起始色块，将颜色设置为 #667eea（靛蓝色），点击结束色块设置为 #764ba2（紫色）。你可以点击「+ 添加色标」在中间插入第三个颜色节点，例如 #8e44ad（深紫色），并将它的位置调整到50%。实时预览区会立即显示渐变效果。
3
复制CSS代码 — 当效果满意后，点击「复制CSS」按钮。工具会生成标准的CSS渐变代码：
background: linear-gradient(135deg, #667eea 0%, #8e44ad 50%, #764ba2 100%);将这段代码复制到你的CSS文件中，应用到 .hero 类的 background 属性上。你也可以选择复制带厂商前缀的版本，确保在老旧浏览器中也能正常显示。
💡 使用技巧
- 颜色选择技巧：使用相近色系（如蓝-紫、橙-红）的渐变效果最和谐。使用互补色（如蓝-橙）能创造强烈视觉冲击。工具内置了多组精选配色方案供你快速选用。
- 径向渐变应用：选择「径向渐变」可以创建从中心向外扩散的圆形渐变效果，适合用于按钮悬停效果、聚光灯效果或卡片背景。
- 透明度叠加：使用 rgba() 或 hsla() 颜色值可以实现半透明渐变效果，叠加在背景图片上时效果尤为出色，常用于图片上的文字遮罩层。
- 重复渐变：高级用法中，你可以使用 repeating-linear-gradient 创建条纹和棋盘格图案。本工具支持重复渐变的参数设置。
📋 常见场景
| 场景 | 说明 | 示例 |
|---|---|---|
| 网页Hero背景 | 网站首屏大图渐变色背景 | 135度蓝紫渐变 |
| 按钮设计 | 渐变色按钮增加立体感 | 悬停反色渐变 |
| 卡片背景 | 内容卡片使用渐变边框 | 对角线渐变边框 |
| 数据可视化 | 图表中使用渐变色填充 | 面积图渐变色 |
| UI微交互动效 | 渐变背景的过渡动画 | 背景色平滑变化 |
❓ 常见问题
Q: 线性渐变和径向渐变有什么区别？
A: 线性渐变沿一条直线方向过渡颜色（如从上到下、对角线）；径向渐变从一个中心点向所有方向辐射过渡颜色（如从中心到边缘）。线性渐变适合背景和边框，径向渐变适合按钮和聚光灯效果。
Q: 渐变色在老旧浏览器中能显示吗？
A: CSS渐变从IE10+开始支持，所有现代浏览器均支持。如果需要兼容IE9及以下，需要提供纯色回退方案（在渐变代码前添加一行 solid color 声明）。本工具提供了兼容性提示。
Q: 如何制作渐变色文字？
A: 使用 CSS 的 background-clip: text 和 -webkit-text-fill-color: transparent 属性组合，可以将渐变色应用到文字上。示例：background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;