Check out a free preview of the full CSS In-Depth, v2 course:
The "Radial Gradients & Position" 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:

Radial gradients start from a center point and move outwards. You can position the center of the gradient.

Get Unlimited Access Now

Transcript from the "Radial Gradients & Position" Lesson

[00:00:01]
>> Estelle: Radial gradients have two things in common with the linear gradients, which are color-stops and color-hints.
>> Estelle: The thing to remember in terms of the position is you wanna use the at keyword. The position that you're declaring is the center point of your radial gradient, the center of the circle or the ellipse.

[00:00:28]
>> Estelle: And if the size it specifies as a circle, or if it's omitted, the length can be a length or percent. So let's look here at this, this is the default. By default, a background gradient that is radial, just like linear, will be at the center, it'll be centered.

[00:00:49] Here we're going, we're saying an ellipse at center, default is ellipse, default is at center. And then I say palegoldenrod at 0% and rebeccapurple at 100%.
>> Estelle: If I said at 25, 25, rather,
>> Estelle: Or at 5.
>> Estelle: One of the other things is that it basically has the same aspect ratio as the parent.

[00:01:26] So the aspect ratio of my gradient, it's basically in this corner right here. And if I actually do 0, 0, the palegoldenrod, it will be right here, it's palegoldenrod. Right here at the farthest corner it's rebeccapurple, and the gradient line basically goes like that.
>> Estelle: So in terms of position, you can use the same values as the background-position property that we used earlier today.

[00:01:59] You wanna include the at key term in front of it, though. With background-position on background images, we don't include the at, right? But in the radial gradient, when you're declaring the radial gradient, you can also add a background-position to the radial gradient and say, I want this radial gradient background image to be here.

[00:02:17] But within the syntax of the radial gradient, you're using the at key term.
>> Estelle: There are no angles because it's a circle, right? So it's going around, or it's an ellipse that's going around. So it's called a gradient ray, not a gradient line. So let's talk about the position.

[00:02:37] This little black dot, you see how it says black 1%, 1%. So it's gonna go black from 0 to 1%. And the midpoint, there, it's a solid black circle, wherever the midpoint is of my gradient, and that's where it's gonna be. So play along with this. If I move it to the 25% mark, it's 25% from the left and 95% from the top.

[00:03:01] And here we're gonna change it to 15%, the top. And you can see that that gradient changed, right? There's definitely more purple here in the center. So the position is within the background image size that you have. So if we actually said background-size 300 pixels by 400 pixels, right?

[00:03:34] Background,
>> Estelle: Actually, let's make it 400 by 300, cuz this looks ugly.
>> Estelle: And I know I wanna make things look ugly, but not that ugly, background-repeat.
>> Estelle: Okay, so I'm just gonna have a single one. And then I'm just gonna add background-position and put it in the bottom right, so we can look at it, background-position: 100%, 100%, and I spelled it wrong.

[00:04:13] Okay, so there's my gradient in the bottom corner, it's a background image that is 400 by 300 pixels, right, it's 400 pixels wide, 300 pixels tall. If we remember from the background-position property, the bottom right hand corner of the background-image is in the bottom right hand corner of the parent.

[00:04:36] That's just background-position. But in terms of the ellipse itself, the center of the ellipse is 25% from the left and 15% from the top of that background-image size, whatever that size was, right? We could make it 500 and 400. It's gonna move to be within that, but I wanna put it down here so we can actually see it.

[00:05:04]
>> Estelle: I could do circle, and you can barely see a change. But if I did a background-size 600, now let's do 800, right? Circle, ellipse, do you see the difference? This one's really long, and not that tall.
>> Estelle: Okay, and let's do it at the 50% mark from the top and then change it to circle.

[00:05:39] So here you could see that that ellipse is a really long ellipse, right? If I do circle, see it's rounder, it's not going all the way off to the right. I mean, it is actually going off all the way to the right, like this is where the 100% mark is, okay.

[00:05:57]
>> Estelle: So we kinda did position already. You can actually use the four-point background-position. Remember when we were talking about the four, when you could say 15 pixels bottom, or right 10 pixels, bottom 10 pixels. So with gradients, you can actually use that four-point background position. So yeah, it can be used not just in background-position, but in actual the position of your gradient.