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
With linear and radial gradients, we're able to add what are called color stops to control the progression of colors in a gradient. Color stops are stopping points in a gradient that show a specific color at the exact location we define. So they let us create more complex gradient effects.
Further reading
With linear and radial gradients
we're able to add what are called
0:00
the color stops to control
the progression of colors in a gradient.
0:05
Color stops are stopping
points in a gradient that show
0:10
a specific color at the exact
location we define.
0:15
So, they let us create more
complex gradient effects.
0:19
Currently, the linear gradient in our
.callout class has two color stops.
0:24
The orange color stop at the beginning,
and the papayawhip color stop at the end.
0:29
To add a third color stop, we can start
by simply adding another color name or
0:35
hex value to our gradient colors.
0:40
For example, what if we wanted our
orange hex value to transition
0:43
to firebrick red before
transitioning to papayawhip.
0:48
We haven't specified any color
stop position values just yet.
0:55
So, the browser places
the firebrick color exactly
1:01
halfway between the orange and
the papayawhip.
1:05
CSS gives us the ability to control
exactly where our color stops land.
1:09
We just need to type percentage
values after each color stop.
1:15
So far what we typed matches the default,
but let's try some different numbers.
1:26
If we change the number
next to firebrick to 25%.
1:32
We'll see pure firebrick red 25%
of the way through the gradient.
1:36
Then the colors will
transition from firebrick to
1:42
papayawhip the rest of the way.
1:46
There's no rule stating that our gradient
needs to start at 0% or finish at 100%.
1:49
If we change the papayawhip
color stop to 60%.
1:56
Now the gradient
transitions to papayawhip,
2:01
60% of the way through the shape.
2:05
And remains papayawhip
colored the rest of the way.
2:07
And our color stops to work no matter
what direction the gradient is rotated.
2:12
If we delete the degree value,
for example.
2:19
The gradient returns to its
top to bottom direction but
2:23
the color stops function
the same as before.
2:28
We can create a dramatic glass like
effect by positioning one color
2:33
stop immediately after another.
2:38
I'm going to replace my gradient
values with four colors.
2:40
Notice that I've included color
stops at both 50 and 51%.
2:58
The colors transition
gently from 0% to 50%.
3:04
Then jump immediately to
a different color at 51% before
3:09
starting another gradual
transition to 100%.
3:14
We can add even more shine to this
gradient by comma separating two or
3:23
more gradients.
3:28
The gradient listed first will by default
cover the original gradient listed second.
3:44
So, for
now I'm only seeing my new gradient.
3:50
However, what happens if we use RGBA
values rather than color names?
3:54
Our gradient will include transparency
4:00
And now we see a subtle lighting effect
caused by combining two gradients.
4:23
One that uses transparency
layered over one that
4:29
doesn't plus our box shadow
from an earlier video.
4:33
Fun stuff, right.
4:38
That last gradient declaration
probably looked a little complicated.
4:40
But it's worth a reminder that
the most critical part of gradients
4:46
isn't memorizing hex values or
all the parts of the syntax.
4:51
To succeed in working with CSS gradients,
it's enough to understand
4:55
which values control gradient
direction and color stops.
5:00
And to apply your knowledge of CSS
colors from earlier courses and videos.
5:04
And of course,
keep on referring to documentation
5:11
from sources like MDN and CSS Tricks.
5:16
In our last video, we'll improve
the spacing of our Lake Tahoe page for
5:19
better legibility, and
add CSS media queries to make it look
5:25
just as effective on a large
screen as it does on mobile.
5:30
You need to sign up for Treehouse in order to download course files.
Sign up