背景渐变，是提升网页现代感与科技感的核心技巧之一。就拿咱们绿叶网来说，导航、文章、按钮等很多地方都用到了背景渐变。
Tailwind CSS 定义渐变
在 Tailwind CSS 中，实现一个背景渐变必须具备以下 2 条件：
- 定义渐变方向。
- 定义颜色节点。
语法：
bg-linear-to-{方向}
from-{起点颜色} to-{终点颜色}说明：
其中，常用的渐变相关类名如下表所示。
| 类名 | 说明 |
|---|---|
| bg-linear-to-t | 从下往上渐变 |
| bg-linear-to-tr | 从左下往右上渐变 |
| bg-linear-to-r | 从左往右渐变 |
| bg-linear-to-br | 从左上往右下渐变 |
| bg-linear-to-b | 从上往下渐变 |
| bg-linear-to-bl | 从右上往左下渐变 |
| bg-linear-to-l | 从右往左渐变 |
| bg-linear-to-tl | 从右下往左上渐变 |
示例 1：双色渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<div class="w-64 h-32 bg-linear-to-r from-red-500 to-blue-500">
</div>
</body>
</html>页面效果如下图所示。
分析：
对于背景渐变，我们需要定义 3 个类才行。在这个例子中：
bg-linear-to-r：定义方向是 “从左往右（to right）”。from-red-500：定义起点颜色是 “red-500”。to-blue-500：定义终点颜色是 “blue-500”。
Tailwind CSS 三色渐变
很多时候，双色渐变会显得有些单调。如果想要打造更加梦幻、炫酷的三色渐变效果（例如经典的 “极光” 或 “晚霞” 渐变），我们可以在中间插入一个过渡色。
在 Tailwind CSS 中，我们可以使用 “via-*” 相关类名来定义三色渐变的中间色。
语法：
via-{颜色}-{色阶}说明：
“颜色” 是颜色的英文名，比如 red（红）、blue（蓝）、green（绿）、gray（灰）等。
“色阶” 取值范围通常是 50~950。值越小，颜色越浅；值越大，颜色越深。一般来说，500 是最标准的基础色。
示例 2：三色渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<div class="w-64 h-32 bg-linear-to-r from-indigo-500 via-purple-500 to-pink-500">
</div>
</body>
</html>页面效果如下图所示。
Tailwind CSS 线性渐变
Tailwind 的原生渐变系统（from-*, via-*, to-*）在底层机制上有一个硬性限制：它最多只能支持 3 种颜色的过渡（即一个起点、一个中点、一个终点）。
如果想要实现更多色的渐变（比如彩虹渐变），我们是无法使用 “via-” 来强行塞入更多颜色的，比如下面这种写法是无效的。
class="from-red-500 via-orange-500 via-yellow-500 to-purple-500"在 Tailwind 中，我们可以使用 “bg-[linear-gradient()]” 这种任意值的方式来实现线性渐变。
语法：
bg-[linear-gradient()]说明：
中括号 “[]” 内部是一个 linear-gradient() 函数。
示例 3：彩虹渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<div class="w-64 h-32 bg-[linear-gradient(to_right,red,orange,yellow,green,blue,indigo,violet)]">
</div>
</body>
</html>页面效果如下图所示。
分析：
小伙伴们特别要注意一下 “to_right” 的写法，“to” 与 “right” 之间是一个下划线（_），而不是一个空格。
常见问题
1. 为什么我写了 from-red-500 to-blue-500，但是背景却完全没有变色呢？
这是初学者最容易犯的错误之一。很多小伙伴只记得写 “起点色” 和 “终点色”，却忘记写渐变方向了。
如果没有 “bg-linear-to-*”（比如 bg-linear-to-r）作为前提，此时浏览器根本不知道这是一个渐变背景。因此小伙伴们一定要记住：“方向 + 颜色”，两者缺一不可。
2. 我可以只写 from，而不写 to 吗？
可以的。在 Tailwind CSS 中，如果我们只写 from-* 而不写 to-*，比如：
from-green-500此时渐变会自动从绿色平滑过渡到 “透明（transparent）”。这种效果在制作图片底部的遮罩层时非常有用。
