Check out a free preview of the full CSS In-Depth, v2 course:
The "Gradient Directions" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Make gradients render in any direction using "to" top, left, bottom or right. You can also use degrees to set the specific angle for a gradient direction, and a quick note on animation.

Get Unlimited Access Now

Transcript from the "Gradient Directions" Lesson

[00:00:02]
>> Estelle Weyl: So let's go on to the direction. Basically, everything so far has been talked about and except for the ones that weren't addable, which went from left to right. So you can declare the direction. So let's first start by discussing when we say to and we have to give a side or corner.

[00:00:20] So the options are to top, to bottom, and to bottom is the default, to left, to right, to top left, to top right, to bottom right, or to bottom right.
>> Estelle Weyl: In this example here, this is the midpoint, and I'm gonna say to bottom, which is the default.

[00:00:43] And so that gradient line goes from top to bottom. If I say to left, you'll see it's going from the first color declared of purple to goldenrod. It's going from the right to the left.
>> Estelle Weyl: Now it's gonna go from the left to the right. It's basically going, to right.

[00:01:12] And then I can have it go, to top. Fairly simple, right? Now, I'm gonna say to top left. And if you see the midpoint of that gradient, right, is going from the bottom corner to the top corner, right? And the gradient line,
>> Estelle Weyl: That's along, like if I'd given 15 different colors, it would go along that line.

[00:01:41] So everything's going along that line. It's perpendicular to the midpoint.
>> Estelle Weyl: To top right, they're called magic corners which is the 50% mark, goes from this corner right here, if it didn't have a border radius, to this corner right here, if it didn't have a border radius. And it's a little off.

[00:02:02] No, it's not, actually, it's perfectly fine. So basically, that's what's going on, your gradient line is at a right angle to the midpoint of a line that goes from one corner to the other corner.
>> Estelle Weyl: So it's going from the top, in this case it's going to the bottom right.

[00:02:23] So it's starting up here and going down here. So is going the general direction of the bottom right, but it's going in the general direction. So that the perpendicular line would go from corner to corner.
>> Estelle Weyl: So let's try this, just write all of them, to right, to left, to bottom right.

[00:02:53]
>> Estelle Weyl: And let's just do 50%.
>> Estelle Weyl: 50%, you see at that green line, that yellow-green change goes from corner to corner? But the gradient line, so the gradient line is the line that's going from red, to orange, to yellow, to green, to blue, to purple. So it's actually going from the top left corner to the bottom right corner, but it's not actually hitting either corner.

[00:03:20] It's going in such a way that it's perpendicular to the line that goes from the bottom left or the top right. Does that make sense? So now let's discuss angles. So we've been declaring everything with key terms. Now, we can learn how to do it with angles. The degrees go starting at 12 noon, or at the top which, is 0%.

[00:03:46] The right is 90%, the bottom is 180, and the left is 270. So 0 degrees is the same as top, but 45 degrees is not the same as top right. Because 45 degrees will always be 45 degrees, but top right might be at a different angle depending on the aspect ratio.

[00:04:11] And the degree is required. You don't have to use degrees, you can use gradients or grads, but no one uses gradients or grads. So we're not really going to cover them, but you can actually play with it and it's fine. So here, I'm just right there, I made it 216 degrees.

[00:04:32] And so the degrees is
>> Estelle Weyl: 0 degrees is actually where the black line goes, right? 0 degrees, it's going up and down. And then the gradient follows that gradient line.
>> Estelle Weyl: And so let's just click on 45 degrees, right, that's 45 degrees. And let's do top right, so you see it's slightly different.

[00:05:03]
>> Estelle Weyl: And just to reiterate the point between 45 degrees. The one that says 45 degrees, the angle, that grading is never gonna change. The box is gonna get taller or shorter but it's not gonna change the angle. Whereas the top right will actually change its location. So you see the 45 degree is that angle that's still exactly the way it was whereas the gradient line in the two top right is almost vertical.

[00:05:29] And here, it's closer to horizontal, whereas this one is still 45 degrees. So two top right and 45 degrees aren't actually different. So one of the questions that I got was can you animate it. And I did it once. So I did this website called the School For Machines Who Can't Learn Good and Want to Do Other Stuff Good Too.

[00:05:49]
>> Speaker 2: [LAUGH]
>> Estelle Weyl: And there's two easter eggs on this page. One is the light switch, and then the other one is an animated radial gradient. And it doesn't animate very well.
>> Estelle Weyl: So it is possible to animate, but it's kind of not the best thing to do. So let's move on.

[00:06:20] And continue on gradients, and we'll actually talk about maybe animating the gradient when we talk about animations later on.