Check out a free preview of the full CSS In-Depth, v2 course:
The "Color Stops, Hints & Repeating" 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:

You can set color stops and color hints on radial gradients too.

Get Unlimited Access Now

Transcript from the "Color Stops, Hints & Repeating" Lesson

[00:00:02]
>> Estelle Weyl: Okay, so here,
>> Estelle Weyl: I basically said, I don't have any color hints but we could. We could say 20%.
>> Estelle Weyl: And now the red is circled we can add similarly the color hints. And it's a solid orange, another color hint, of yellow, another color hint of green, and another color hint,

[00:00:40]
>> Estelle Weyl: Of blue. Now, the purple isn't showing up, I would have to do 99,
>> Estelle Weyl: And 99.9.
>> Estelle Weyl: It's teasing me.
>> Estelle Weyl: Is that purple?
>> Estelle Weyl: Here it is, okay.
>> Estelle Weyl: So for some reason, when I was doing 99.9, it was like, yeah, no, you can't do that.

[00:01:25]
>> Estelle Weyl: I don't know where it will allow me to do that, but, seven, six, six. Okay, that's purple. So I don't know why it's not allowing me to do the 100. That's probably a bug that I should submit. But you can use the exact same color stock syntax, and the exact same color hint syntax.

[00:01:41] As you did with radial gradients. But to finish up with gradients, let's go over repeating radial gradients. Repeating radial gradients are basically similar to repeating linear gradients. You have to mark what the 100% mark is, and it will repeat from there on out. You wanna use all of the other features as you did before.

[00:02:05] So in this example here,
>> Estelle Weyl: I'm saying closest-side at 100 pixels. So from this center of the circle to this outer side, it's 100 pixels. So I said 100% here is the purple mark, but the purple mark is at this spot right here, the closest side, and therefore, this radius is 100 pixels.

[00:02:36] And so our repeating is at every 100 pixels. So it goes 100 pixels out, and then you have the next circle has a diameter, the first circle has a diameter of 200, the next one of 400, 600, 800, and so it's very similar. If I had put actually at 200 pixels, there would be a big difference if I put a 300.

[00:02:56] It would be a big difference if it was 400, right? Because it's basically going, the radius, and determine the radius the closest side, and the closest side is now the top.