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