什么是 CSS 渐变 (CSS Gradients)？

CSS 渐变是一种能在 HTML 元素的背景中显示平滑颜色过渡的技术。与传统的背景图片不同，渐变是由浏览器实时渲染的矢量图形，这意味着它们具有无限的清晰度，且不会增加页面的加载负担（仅需几行文本代码）。

为什么在网页设计中使用渐变？

在扁平化设计 (Flat Design) 向微渐变 (Semi-flat) 演进的过程中，渐变色成为了提升网页质感的利器。它可以解决以下设计痛点：

• 增加视觉深度： 通过颜色的微妙变化，让原本单调的平面呈现出空间感和光影效果。
• 引导用户视线： 利用色彩的强弱和流向，自然地吸引用户注意按钮 (CTA) 或重要标题。
• 强化品牌个性： 独特的渐变配色方案往往比单一纯色更能给人留下深刻的品牌印象。
• 极致的性能优化： 替代高分辨率的背景大图，显著减少 HTTP 请求和带宽消耗，提升页面加载速度。

三种核心渐变类型详解

• 线性渐变 (Linear)： 颜色沿直线方向过渡。您可以调整角度（0° 到 360°）来改变流动方向。
• 径向渐变 (Radial)： 颜色从中心点向外以圆形或椭圆形扩散，常用于营造发光或聚光灯效果。
• 锥形渐变 (Conic)： 颜色绕中心点顺时针旋转，类似于色轮或饼图，在现代 UI 中非常流行。

常见问题解答 (FAQ)

Q: 生成的代码兼容所有浏览器吗？
A: 是的。本工具生成的代码遵循 W3C 标准。对于极老版本的浏览器，建议设置一个纯色背景作为回退 (Fallback)。

Q: 如何创建通透感更强的渐变？
A: 建议在颜色节点中加入具有相同色相但明度不同的颜色，或者适当使用透明度 (RGBA)。

Q: 这个工具可以生成多重渐变吗？
A: 目前支持单一图层的多节点渐变。如果需要多层叠加效果，可以将生成的代码作为 background-image 属性的一部分与其他层组合。