Tailwind CSS 颜色介绍—渐变（css渐变颜色参数）
1.bg-gradient
普通渐变
1.bg-gradient-to-{方向}
t (top)
b (bottom)
l (left)
r (right)
2.设置起始颜色 中间颜色和结束颜色
from-blue-500 (开始颜色)
via-purple-500 (中间颜色)
to-pink-500 (结束颜色)
备注:中间颜色是可选的
举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body>
<div class="grid grid-cols-2 grid-rows-2 gap-y-4 ml-20 mx-auto">
<div class="w-40 h-40 bg-gradient-to-t from-blue-500 via-purple-500
to-pink-500">
bg-gradient-to-t
</div>
<div class="w-40 h-40 bg-gradient-to-b from-blue-500 via-purple-500
to-pink-500">
bg-gradient-to-b
</div>
<div class="w-40 h-40 bg-gradient-to-l from-blue-500 via-purple-500
to-pink-500">
bg-gradient-to-l
</div>
<div class="w-40 h-40 bg-gradient-to-r from-blue-500 via-purple-500
to-pink-500">
bg-gradient-to-r
</div>
</div>
</body>
</html>
bg-linear 支持更多的渐变方向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body>
<div class="grid grid-cols-4 grid-rows-2 gap-y-4 ml-20 mx-auto">
<div class="w-40 h-40 bg-linear-to-t from-blue-500 via-purple-500
to-pink-500">
bg-gradient-to-t
</div>
<div class="w-40 h-40 bg-linear-to-tr from-blue-500 via-purple-500
to-pink-500">
bg-gradient-to-tr
</div>
<div class="w-40 h-40 bg-linear-to-r from-blue-500 via-purple-500
to-pink-500">
bg-gradient-to-r
</div>
<div class="w-40 h-40 bg-linear-to-br from-blue-500 via-purple-500
to-pink-500">
bg-gradient-to-br
</div>
<div class="w-40 h-40 bg-linear-to-b from-blue-500 via-purple-500
to-pink-500">
bg-gradient-to-b
</div>
<div class="w-40 h-40 bg-linear-to-bl from-blue-500 via-purple-500
to-pink-500">
bg-gradient-to-bl
</div>
<div class="w-40 h-40 bg-linear-to-l from-blue-500 via-purple-500
to-pink-500">
bg-gradient-to-l
</div>
<div class="w-40 h-40 bg-linear-to-tl from-blue-500 via-purple-500
to-pink-500">
bg-gradient-to-tl
</div>
</div>
</body>
</html>
2.bg-radial
基于中心向外渐变
举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body>
<div class="grid grid-cols-3 ml-20 mx-auto">
<div class="size-24 rounded-full bg-radial from-blue-600 to-green-400"></div>
<div class="size-24 rounded-full bg-radial-[at_50%_75%] from-indigo-600 via-indigo-50 to-indigo-600"></div>
<div class="size-24 rounded-full bg-radial-[at_25%_25%] from-violet-700 via-lime-300 to-violet-700"></div>
</div>
</body>
</html>
3.bg-conic
基于角度渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body>
<div class="grid grid-cols-3 ml-20 mx-auto">
<div class="size-24 rounded-full bg-conic from-blue-600 to-green-400"></div>
<div class="size-24 rounded-full bg-conic-180 from-indigo-600 via-indigo-50 to-indigo-600"></div>
<div class="size-24 rounded-full bg-conic/decreasing from-violet-700 via-lime-300 to-violet-700"></div>
</div>
</body>
</html>
