如何创建 CSS 渐变（线性、径向、锥形）
学习如何设计并编写漂亮的 CSS 渐变。附赠免费可视化渐变生成器。
为什么要用 CSS 渐变？
CSS 渐变让你在不使用图片的情况下创建平滑的色彩过渡。它非常适合做背景、按钮、卡片和首屏区域。由于渐变是浏览器从代码生成的，它可以完美缩放到任意分辨率，不增加下载体积，并能即时调整。主要有两类：线性渐变（沿直线流动）和径向渐变（沿圆形流动），近几年又新增了锥形渐变（围绕中心旋转）。
选好渐变可以让扁平设计更有层次、营造氛围，或引导视线聚焦在行动号召上。关键是从一组强对比的配色开始，并选对方向和色彩节点。
常见使用场景
- 首屏区域：吸睛的着陆页背景
- 按钮：细腻的渐变让 CTA 看起来更可点
- 卡片和面板：不靠图片也能打造背景层次
- 加载状态：为占位符制作平滑流光效果
- 边框和文字：新一代 CSS 可以把渐变应用到文字描边和边框
方法 1：使用 UtilBoxx 免费 CSS 渐变生成器（推荐）
我们的 CSS 渐变生成器 让你挑选颜色、设置节点、选择方向，并复制可上线的 CSS。步骤如下：
- 访问 utilboxx.com/zh/tools/color/gradient
- 用拾色器选择两种或更多颜色
- 调整节点、角度和形状（线性、径向、锥形）
- 在画布中实时预览效果
- 点击"复制 CSS"获取代码片段
这个方法的优势：
- 实时预览，无需刷新页面
- 输出干净、含浏览器前缀的 CSS
- 支持线性、径向、锥形渐变
- 可通过 URL 保存和分享渐变
- 移动端可用，触控友好
方法 2：手写 CSS
CSS 中的线性渐变长这样：
```css background: linear-gradient(135deg, #ff7e5f, #feb47b); ```
径向渐变：
```css background: radial-gradient(circle at center, #6a11cb, #2575fc); ```
锥形渐变（特别适合做饼图效果）：
```css background: conic-gradient(from 180deg, red, yellow, lime, cyan, blue, magenta, red); ```
你可以使用任意数量的颜色节点和百分比来控制混合。
方法 3：使用现成的渐变库
uiGradients、Grabient、ColorHub 等网站提供了精心挑选的渐变集合。你可以浏览、复制 CSS 粘贴到项目中。当你不需要定制设计时，这是最快的方式。
常见问题
线性、径向、锥形渐变的区别是什么？
线性沿直线流动；径向从中心点向外辐射；锥形围绕中心扫过颜色，像调色盘。每种都产生不同的视觉效果。
CSS 渐变会影响性能吗？
不会。渐变由浏览器的合成器计算，运行时几乎免费。比背景图片体积小，并能适应任意分辨率。
渐变能用在边框和文字上吗？
可以。用 `border-image: linear-gradient(...)` 应用到边框，用 `background-clip: text; color: transparent;` 填充文字。渐变几乎可以应用到任何地方。
如何让渐变具备可访问性？
确保与上面文字的对比度足够。用对比度检查器验证，并考虑为偏好减弱动效或高对比度的用户提供纯色回退。
结论
CSS 渐变是一种强大、轻量的设计工具。想要快速、可视化的工作流，UtilBoxx CSS 渐变生成器 是设计和复制可上线代码的最简单方式。