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
With CSS gradients, we can add depth to our designs by creating smooth and gradual transitions between two or more colors.
Quick Reference
With CSS gradients, we can add depth to
our designs by creating smooth and
0:00
gradual transitions between two or more
colors.
0:04
A gradient is not exactly a real CSS
color.
0:07
It's actually an image with absolute
dimensions and no fixed size.
0:11
The actual size of a gradient by default
matches the size of
0:15
the element it's applied to.
0:18
And they are commonly used for website
backgrounds, header backgrounds or
0:20
in certain UI elements.
0:24
So, in our project, we're going to create
a gradient in our
0:26
main header that overlays the background
image.
0:29
It'll add a nice touch once we're done.
0:32
But first, let's go over how gradients
work.
0:34
So, we'll go back to our style.css file.
0:38
And under Main Styles, right here in the
main-header rule,
0:40
we're gonna define the background-image
property at the bottom.
0:44
[BLANK_AUDIO]
0:49
Now, this will temporarily override the
current background image
0:52
we're displaying in our main header, but
that's okay for now.
0:55
So now, we're gonna define a linear
gradient background by
0:58
typing linear-gradient followed by a set
of parentheses.
1:04
Now, in between the parentheses is where
we'll need to define the colors of
1:10
the gradient.
1:13
The colors can be any of the keyword
values, it can also be a hex value or
1:15
an RGBA color value.
1:18
So first, let's define that orange hex
value shade by typing #FFA949.
1:20
Then we're gonna follow this with a comma
and we're gonna define our second value.
1:29
Let's make it the color keyword,
firebrick.
1:33
And notice that when we hover over the
gradient value in Workspaces,
1:36
the color preview shows the gradient.
1:40
I think that's pretty cool.
1:42
So, when we save our style sheet and
refresh the page, this creates a smooth
1:43
fade from the orange color to firebrick
red, from top to bottom.
1:49
Now, once we have our gradient colors
defined,
1:55
we're also able to control the angle and
position of our gradients.
1:58
So, by default, the gradient direction
goes from top to bottom, so
2:02
as we can see here in our header, the
orange in shade begins at the top and
2:07
it fades into the red color ending at the
bottom.
2:11
Now, if we wanna reverse the gradient
order so
2:15
that the firebrick red color starts from
the top,
2:17
well, we can either reverse the colors in
between the parentheses or
2:21
we can add the direction value to top
before the color values.
2:26
So, right before the first color value,
let's type to top and a comma.
2:31
So when we save our style sheet and
refresh the page, as you can see,
2:38
that reverses the color order of our
linear gradient.
2:43
And if we wanna change the direction to
go, say, from right to left, well,
2:47
we can go back and change the direction
value to say to left.
2:51
So now, when we take a look at it again,
we can see how
2:58
our gradient starts on the right and ends
on the left side of our header.
3:01
And if we want more control over the
gradient direction,
3:07
we can also define angle values using
degree units.
3:10
Now, the angle parameters rotate
clockwise, so if we type the angle value
3:13
0deg for zero degrees, when we save our
style sheet and refresh the page,
3:22
notice how this creates a gradient
starting from the bottom to the top.
3:28
It's the same as the to top value we used
earlier.
3:33
So, as the angle direction increases,
3:37
it then continues rotating clockwise
unless we define a negative value.
3:39
So, for instance, if we change the angle
value from zero degrees to 45 degrees,
3:43
when we refresh the browser, notice how
the gradient moves 45 degrees clockwise.
3:51
So now it starts at the bottom left corner
and ends at the top right corner.
3:56
And if we go back and change the degree
value to 90 degrees,
4:02
when we save our style sheet and take a
look at it once again,
4:09
this creates a gradient that starts on the
left and ends on the right, and so forth.
4:12
So, the second type of gradient we can
create is a radial gradient.
4:18
Radial gradients are like linear gradients
that start from a center point and
4:22
smoothly spread outward in a circular or
4:27
elliptical shape based on the parameters
we set.
4:30
And like linear gradients, we can create a
basic radial gradient with two or
4:33
more color values, and the syntax is also
very similar to linear gradients.
4:38
So, if we go back to our gradient
declaration and
4:42
we change our gradient from linear to
radial, and
4:46
let's remove the decree value and just
keep the two color values,
4:50
when we save our style sheet and refresh
the browser,
4:56
we get a rice radial-shaped gradient
that's centered in our header.
5:00
It fills it entirely to each of the
corners.
5:06
So, by default, the radial gradient shape
is in the shape of an ellipse, but
5:10
we can change that.
5:15
So, to give the gradient a more circular
shape,
5:16
we'll need to add the circle keyword
before the list of colors.
5:19
So right before the first color value,
5:24
I'm going to type the keyword circle
followed by a comma.
5:26
So now when we save our style sheet and
take a look at our header once again,
5:30
you can see how the gradient is a little
more evenly spread out as a circle.
5:34
And we'd really be able to see a more
defined circle or
5:38
shape if the header wasn't as tall.
5:40
So, for example, let's go back and change
the main headers' height to 450.
5:42
So we'll save this and refresh, and now
we're able to
5:49
see more circular gradient shape compared
to the default elliptical shape.
5:52
I'll go ahead and remove the circle value
so we can see the difference.
5:57
Finally, we're also able to change the
radial gradient's
6:03
position using the at keyword.
6:06
So, let's go back and add the circle shape
value.
6:10
Then right after that, we're going to
write at top followed by a comma.
6:14
And notice how there's no comma between
the circle value and the word top.
6:21
They should all be defined before the
first comma.
6:26
So, before we take a look at what this
looks like,
6:30
let's go back to the height declaration
and change the value back to 850 pixels so
6:32
we can get that fuller header height we
want.
6:37
So, let's save our style sheet, and when
we refresh the page, notice how the at
6:39
top position value positions the gradient
in the top center area of our header.
6:45
Now, if we only use one position value,
6:51
the second value will default to center,
but we can still use two position values.
6:54
For example, let's make the position at
top right.
6:59
And when we save and take a look at it
again, we can see how this positions
7:04
the origin of the radial gradient at the
top right corner of our main header.
7:08
So up next, we're gonna learn how to add
color stops to our gradients.
7:14
Then we'll finish up by adding a nice
transparent gradient over the main
7:17
header background image.
7:21
You need to sign up for Treehouse in order to download course files.
Sign up