什么是 CSS 渐变？

CSS 渐变（CSS Gradients）是一种在网页中显示两种或多种颜色平滑过渡的图像效果。相比于使用传统的背景图片，CSS 渐变具有加载速度快、无限放大不失真、易于通过代码修改等优势，是现代网页设计中解决“视觉层次感”和“现代感”问题的核心技术。

线性、径向与锥形渐变的区别

• 线性渐变 (Linear Gradients)： 颜色沿一条直线（轴）进行平滑过渡。通过调整角度，您可以创建从上到下、从左到右或任何对角线方向的过渡。
• 径向渐变 (Radial Gradients)： 颜色从一个中心点（原点）向外辐射。它非常适合模拟光晕效果或创建圆形的视觉中心。
• 锥形渐变 (Conic Gradients)： 颜色围绕中心点进行旋转过渡。它常用于创建饼图、色彩轮或独特的现代抽象背景。

如何打造惊艳的渐变效果？

好的渐变不应该是生硬的颜色堆砌，而应该是细腻的过渡：

• 避免“泥土感”： 在色轮上选择相近的颜色（邻近色）进行渐变，比选择对比色更容易获得清爽的效果。
• 利用透明度： 通过调节颜色点的 Alpha 通道，您可以创建半透明的叠加效果，让背景更具深度。
• 多点微调： 不要只使用两个颜色点。通过添加 3-5 个位置相近的断点，可以模拟更真实的光影变化。

常见问题 (FAQ)

Q: 渐变代码在旧版浏览器中能显示吗？
A: 现代主流浏览器完全支持标准语法。如需兼容极其老旧的浏览器，可能需要添加 `-webkit-` 等前缀，本工具生成的为标准现代语法。

Q: 渐变会影响网页性能吗？
A: 基本不会。渐变是由浏览器实时渲染的数学图像，性能开销极低，远优于加载高清图片背景。

Q: 锥形渐变可以用来做加载动画吗？
A: 是的，配合 CSS 动画旋转 `conic-gradient` 的起始角度，是制作平滑旋转加载圈（Spinner）的流行方案。