如何在Tailwind CSS中更改渐变方向？

Question

 <div class="bg-gradient-to-r from-cyan-500 to-blue-500 ">

我尝试了上面的代码。但那是一个线性渐变，我想要一个垂直渐变。

- Mohammed Hafiz

---

尝试使用 bg-gradient-to-t 或 bg-gradient-to-b。 - syed imty

Answer 1

但这是一个线性渐变，我想要一个垂直渐变。

"linear" 是一种渐变的类型，"vertical" 是一种方向。你可能是想说你有一个水平渐变，但是你想要一个垂直渐变。不过两者都是线性的（例如，目前在 Tailwind 中不存在径向渐变，只有线性渐变）。

以下是可用于线性渐变的所有默认方向：

- bg-gradient-to-t - bg-gradient-to-tr - bg-gradient-to-r - bg-gradient-to-br - bg-gradient-to-b - bg-gradient-to-bl - bg-gradient-to-l - bg-gradient-to-tl

所以对于垂直方向，只需使用bg-gradient-to-t（从底部到顶部）或bg-gradient-to-b（从顶部到底部）。

在文档中了解更多信息

- Danila