How do I change the direction of a gradient in tailwind css?

Question

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

. . . .

I have tried the above code. But it's a linear gradient, I want a vertical gradient.

Cristycriswell

Try using bg-gradient-to-t or bg-gradient-to-b – Zareba

Answer 1

But it's a linear gradient, I want a vertical gradient.

linear is a type of gradient, vertical is a direction. You probably mean that you have a horizontal gradient but instead you want a vertical one. Both will be linear though (for example radial gradient does not exist in Tailwind right now, only linear exists).

All default available directions that you can use for linear gradient:

• 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

So for vertical direction just use bg-gradient-to-t (from bottom to top) or bg-gradient-to-b (from top to bottom)

More info in the docs

Deadlock