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

Color stops allow you to transition between more than one color in between the start and end positions.

Get Unlimited Access Now

Transcript from the "Color Stops" Lesson

[00:00:01]
>> Estelle: Okay, so a color-stop. A color-stop is basically when you give it a color and that's it, or you give it a color and a unit as to where that color should be located. By default the first one will be at 0%, and the second one will be at 100%.

[00:00:21] You can provide it with any length unit or any percent and the percent is relative to the gradient line which is relevant to the image size. So when were talking about image sizes and we can make an image 30 pixels by 30 pixels, that means that 100% would be 30 pixels, right?

[00:00:40] It's not 100% of the parent, it's 100% of the image in which it finds itself. If you omit the 0 in 100%, it will be evenly distributed between them. If you wanna make a hard stop, like a hard line, you can actually put two color stops on the exact same point.

[00:00:58] And we'll basically say the gradient will be there but over 0 pixels, and so it will look like a hard stop. And if you really do wanna keep your color stops in order from 0 to 100% or from 0 pixels to 1,000 pixels or whatever you're going to do.

[00:01:21] There is a way it will not fail if you don't do that, it will just not have the effect that you're thinking. So in this example, we're using vh units, vh is the view-port height. So the view-port is 100% of the window. And in this case since I'm actually in this little frame, it's the page.

[00:01:45] It's from the top of that slide to the bottom of this slide, not from the top of the screen to the bottom of the screen. So here I'm saying linear gradient at the 0% mark, make it red. At the 20% mark, which is 20 vh,make it orange. And basically make it a gradient from red to orange over the 20% of the page.

[00:02:09] And then at the 40%, make it yellow. So make it a gradient from orange to yellow over 20% of the page. So at the 0 pixel mark, it's actually red, and at the 100% mark, it's actually purple. But you basically just have one pixel line where it's actually blue and one pixel line where it's actually green.

[00:02:29] The rest is just a gradient going from one color to the next.
>> Estelle: That's the length unit. Here, we're using percentages, and then, I change the background size to 50% just to show and I could change it to 30% and I could change it to 20, and make it really ugly.

[00:02:50] [SOUND] I think we should put this on all websites and I think we should make it to-left.
>> Estelle: Yeah. This is why I'm not allowed do art direction. So here, let's just put it back to top to bottom, if I had done a 100% here, it is literally you can see where the lines meet, it is the exact same thing as the previous one, right?

[00:03:24] Cuz the VH unit's in 100% cuz it's the entire document. But when this was 50%, right? It was not the entire document, it's only 50%. And here, oops, if I go back to this one and I do background-size,
>> Estelle: 50%. I don't actually get any purples, because my purple is at the 100 vh mark.

[00:03:58] And at the 100 vh mark, I'm actually repeating a linear gradient that was only 50 vh high. Does that make sense to people?
>> Estelle: I'm gonna do just one more thing here, I'm gonna change this to 100%. And you can see where that mid-point is on that previous slide, its the same the top after the same but I repeated it on the left-hand-side.

[00:04:21] So anyway,
>> Estelle: Percentages is of whatever size the background image is, that was the point of this slide.
>> Estelle: If you have no 0% or 100%, so here I've just said I want the orange to start at the 20 view port height point or the 20% mark. I could just change this to 20% as well, same thing in this case.

[00:04:57] So right here for the first 20%, it's solid orange. I don't have a 100% mark, I say blue at 80 viewpoint heights. So from this point here, which is the 80 viewpoint height mark to the end, it's blue. It's as if I did blue 100% vh, right? Because when there is no 0% and no 100%, if you don't have a percentage or a length on the color, so the color-stop has just been cleared, then it will be 0 and 100%.

[00:05:31] But here I've declared it at 20% and 80 view port height, or let's just change it to 80%.
>> Estelle: Right? So from 80% to 100% mark, it will be solid of whatever that last color was. From the zero to the first color is gonna be solid of whatever that color is.

[00:05:49] So that's what happens when you don't have endpoints.
>> Estelle: Next, I'm gonna show you duplicate of values for color-stop which means a hard stop. So here, I go from zero to the 20% mark and make it red. And then at the 20% mark I say orange, so these two are at the exact same point in time.

[00:06:12] So the red goes from 0 to 20%, in red percent, it's 0 to 20 viewport height in red. And then the gradient is over 0 pixels to orange. And from orange it starts going a gradient from yellow to green to blue. And then blue ends at the 80vh mark, and purple starts at the 80vh mark.

[00:06:31] So we have a hard stop again. I could also do,
>> Estelle: Let's just change this to 60, and now you see at the yellow to degree mark, I have a hard stop again.
>> Estelle: Here, I did all the ones in duplicate, so that you could see at the 20% mark, I changed from red to orange.

[00:06:56] At the 40% mark, it changed from orange to yellow. At the 60% mark, I changed from yellow to green, and at the 80% mark, I changed from green to blue. So those are hard color stops. And that's done by duplicating the color-stop. Now, it should be sequential, because here you'll see that I went out of order.

[00:07:17] So, I say red from 0% to 20%, and then I have a gradient from the 20% mark to the 50% mark where it goes from red to orange, but then I have yellow.
>> Estelle: So it basically says, put yellow at the 50% mark because it wasn't in order.

[00:07:39] If I changed this to 50%, you see nothing changed. So it basically says, you idiot, I can't do this correctly,
>> Estelle: We're just going to pretend that you said 50%. It used to be in the old syntax, you could actually have it out of order, now you can't.

[00:08:02] It's not gonna break, right? Nothing broke, It didn't say, my God, I'm not gonna work for you. It just said this is how I'm gonna handle it.
>> Estelle: Okay, negative values. So I have two gradients right here. There's one, the first one, is only 5% wide, and the second one has a negative value.

[00:08:28] And it was just to compare and contrast the two. So if I change this to zero,
>> Estelle: And I change this to a 100, they'll be the exact same, right? But I move the purple mark,
>> Estelle: I move the purple mark off the page so it doesn't get to your backup purple.

[00:08:50] I mean, it doesn't get to palegoldenrod, rather, until you are halfway to the floor, right? And now,
>> Estelle: It is rebeccapurple, but it's rebeccapurple off the screen. So you can actually use negative values, it's not gonna break, it's just gonna extend the gradient. It's just, you're not gonna be able to see the gradient.

[00:09:12] So, let's just do background-position.
>> Estelle: Yeah, let's get rid of this one, cuz we already saw the comparison, right? We don't need it anymore.
>> Estelle: I was wondering if I moved it,
>> Estelle: Background position 250px 250px, okay. So it actually cuts it off, you don't actually ever get to see that rebeccapurple.

[00:10:11] I thought it would actually extend beyond and it didn't.