Check out a free preview of the full CSS In-Depth, v2 course:
The "Color Hints" 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 hints allow you to specify the mid-point between two color stops.

Get Unlimited Access Now

Transcript from the "Color Hints" Lesson

[00:00:02]
>> Estelle Weyl: So next we have color hints. So so far I've been giving you color stops and each color stop has been associated with a color. But you can actually say where do you want that gradient midpoint to be? So every gradient so far has been a midpoint between two color stops, right?

[00:00:21] Or everything has grown gradually, linearly, no switch in flow. It's not like it's easing in. You can actually change where that midpoint is and define it. You can use any length unit, the percent is relative to the image size, not to the area between the two points.
>> Estelle Weyl: So let's just look at these.

[00:00:54] So the first one is going Rebecca purple at the 0% mark to pale golden
>> Estelle Weyl: And they all are going, these are not editable. These are all to the right, right? So it's good from rebeccapurple on the left to palegoldenrod on the right.
>> Estelle Weyl: The second one is going rebeccapurple, at the 50% mark is the midpoint.

[00:01:21] And then it's going to pale golden run. There's a slight difference between these two images but you probably can't see it. It eases in or it eases around the 50% mark. It's not obvious enough to see. The next one says linear gradient rebeccapurple, 20%, palegoldenrod. The midpoint between these two colors, between the purple and the yellow, is here at the 20% mark.

[00:01:51] So this color right here, you're gonna find it right here. And this one says, make it at the 80% mark. So the midpoint is right there. Hard to tell, I know. So let's look at it slightly differently.
>> Estelle Weyl: Okay, so here I have two linear gradients. They both start with red, orange, yellow, green, blue and then purple.

[00:02:17] The red is at this zero mark, the orange is at the 20vh mark, the yellow is at the 40, the green is at the 60, the blue is at the 80 and the purple is at 100. Same thing here, red, orange 20, yellow 40, green 60, blue 80, and then purple 100.

[00:02:31] The difference is I put these gradient stops in. Since I put zero, the zero is actually this point here and so it breaks it. Basically, it does that thing where it's like, you didn't go in order? But I could have done,
>> Estelle Weyl: 20vh, 40vh, 60vh, 80vh.
>> Estelle Weyl: So that's the same effect as giving hard color stops.

[00:03:06] So instead of saying, repeating all those color stops, you can just give a hint and say I want the midpoint to be the start of the next color. So here I'm saying go from red to orange, from the 0% to the 20% mark and I want the midpoint of the gradient to be at the 20% mark, which is exactly where the orange is declared.

[00:03:29] And it's going from orange at the 20 vh mark to yellow at the 40 vh mark. But I want the gradient midpoint between the orange and yellow to be at the 40 vh mark which is the exact same point as where the yellow starts. If you wanna do a little bit of a gradient between hard stops, you could just do 18,

[00:03:51]
>> Estelle Weyl: 58
>> Estelle Weyl: 78. And so you have a teeny bit of a gradient in between these things, and I missed the one here which would be
>> Estelle Weyl: 98. There, so I have a little bit of a gradient between them. This is so ugly, I'm really good at making things ugly.

[00:04:14] And this is supposed to be 18, okay. So color stops make sense? Do you wanna play with this for like 30 seconds?
>> Estelle Weyl: And next we'll go on to direction. Let's play with it and we'll give you 30 seconds and then-
>> Speaker 2: Like a comma between the red and the 18 vh.

[00:04:42]
>> Estelle Weyl: So the red is 0vh.
>> Speaker 2: Okay, got you.
>> Estelle Weyl: And the purple is 100vh, so you do see a tiny bit of purple in the bottom way down here. And here, this would be if I had just done a gradient with no, if I remove all of these color stops,

[00:05:10]
>> Estelle Weyl: I mean color enhance rather. Those two look exactly the same, right? And there I put them back in. So it's basically saying, before you would just have color stops and then you had to mathematically figure out, if you didn't want the midpoint to be at the 50% mark between two colors.

[00:05:29] Now you can basically say,
>> Estelle Weyl: You can basically say where between those two color stops? One thing to note, though, is note that I did not say 50% for all of these. It's not the mark between the two color points that you're, it's not like which percentage between those two color stops.

[00:05:51] 50% of the way, or 25% of the way, it's from the zero mark. So every single one of these color hints starts from this point right here, it starts at the zero mark. So when I say 78 viewport heights or 78% of viewport height, it is right there.