This course will be retired on July 12, 2021. We recommend "CSS Basics" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
We're able to add color stops to control the progression of colors in a linear and radial gradient. Color stops are stopping points in a gradient that show a specific color at the exact location we set.
Quick Reference
With linear and radial gradients, we're
able to add what are called color stops to
0:00
control the progression of colors in a
gradient.
0:04
Color stops are stopping points in a
gradient that show
0:07
a specific color at the exact location we
set it to be.
0:10
So, they let us create more complex
gradient effects.
0:14
So each color stop should have one or
0:18
two values, a color value and an optional
position value.
0:20
So at the very least, we can simply define
a list of colors as color stops,
0:25
like we've done all along in our linear
and radial gradients.
0:30
Now currently, the radial gradient in our
main header has two color stops.
0:34
The orange color stop and the firebrick
color stop.
0:40
So, let's go ahead and add a third color
stop with the color value dodgerblue.
0:45
So let's save our style sheet and go back
to the browser.
0:53
And when we refresh the browser, notice
how the area between each of
0:57
the three color stops is filled with a
continuous color transition from one
1:01
color to the other, in the order we
listed.
1:06
But we're also able to control to position
of any of these color stops.
1:09
So, by default, since we haven't defined
any color stop position values just yet,
1:13
we're telling the browser that the orange
color stop needs to
1:18
begin at the zero position.
1:22
Then display a continuous color transition
down to the firebrick color stop,
1:24
which begins halfway at the 50% position.
1:31
Then continue that smooth color transition
down to the dodgerblue color stop,
1:34
which ends the gradient at the 100%
position.
1:40
So this is exactly the same as defining
our
1:45
first orange color stop position value as
0%.
1:48
Then our second firebrick position value
as 50%.
1:52
And the third dodgerblue stop as 100%.
1:59
So, as we can see, at each color stop
position
2:02
declared the respective color value's hue
is 100% of its color.
2:07
The browser then evenly distributes and
fades the other values.
2:13
So now if you go back and change any of
these color stop position values,
2:18
the gradient adjusts according to those
values.
2:22
So, for example, let's change the second
firebrick color stop position to 20%.
2:25
So, now when we save our style sheet and
refresh the browser, we can see that
2:32
pure firebrick red color at 20% in the
gradient instead of at 50%.
2:37
Then it's evenly distributed and faded
into the dodgerbblue color stop.
2:42
And if we go back and change the color
stop position value to something else,
2:48
let's say from 20% to 60%.
2:53
When we refresh the browser, notice how
that pure firebrick red
2:57
hue now starts at the 60% position in the
gradient line.
3:02
And we can even go beyond the 100% value
to get wider color transitions.
3:07
So for example, let's to change the third
color stop to 120%.
3:12
So now when we save our style sheet and
refresh the browser,
3:16
we can see that the color transition from
red to dodgerblue is now much wider.
3:21
So now we're only seeing the top part of
the color transition to dodgerblue.
3:27
Color stops work the same way in linear
gradients, so
3:33
be sure to also experiment with them in
linear gradients.
3:36
Now, the best way to create nice gradient
effects is by experimenting with
3:39
color stops, color values, and
3:43
the position and angle perimeters until
you get that desired effect.
3:45
You need to sign up for Treehouse in order to download course files.
Sign up