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

user_16447763 0
Viewed 4733
 <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.

tailwind-css direction gradient
1 Answers

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

linear is a type of gradient, vertical is a direction. You probably meant that you have horizontal gradient and you want vertical. They would both be linear though.

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

user_56504470
Related