With CSS gradients, we can add depth to our designs by creating smooth and

gradual transitions between two or more colors.

A gradient is not exactly a real CSS color.

It's actually an image with absolute dimensions and no fixed size.

The actual size of a gradient by default matches the size of

the element it's applied to.

And they are commonly used for website backgrounds, header backgrounds or

in certain UI elements.

So, in our project, we're going to create a gradient in our

main header that overlays the background image.

It'll add a nice touch once we're done.

But first, let's go over how gradients work.

So, we'll go back to our style.css file.

And under Main Styles, right here in the main-header rule,

we're gonna define the background-image property at the bottom.

[BLANK_AUDIO]

Now, this will temporarily override the current background image

we're displaying in our main header, but that's okay for now.

So now, we're gonna define a linear gradient background by

typing linear-gradient followed by a set of parentheses.

Now, in between the parentheses is where we'll need to define the colors of

the gradient.

The colors can be any of the keyword values, it can also be a hex value or

an RGBA color value.

So first, let's define that orange hex value shade by typing #FFA949.

Then we're gonna follow this with a comma and we're gonna define our second value.

Let's make it the color keyword, firebrick.

And notice that when we hover over the gradient value in Workspaces,

the color preview shows the gradient.

I think that's pretty cool.

So, when we save our style sheet and refresh the page, this creates a smooth

fade from the orange color to firebrick red, from top to bottom.

Now, once we have our gradient colors defined,

we're also able to control the angle and position of our gradients.

So, by default, the gradient direction goes from top to bottom, so

as we can see here in our header, the orange in shade begins at the top and

it fades into the red color ending at the bottom.

Now, if we wanna reverse the gradient order so

that the firebrick red color starts from the top,

well, we can either reverse the colors in between the parentheses or

we can add the direction value to top before the color values.

So, right before the first color value, let's type to top and a comma.

So when we save our style sheet and refresh the page, as you can see,

that reverses the color order of our linear gradient.

And if we wanna change the direction to go, say, from right to left, well,

we can go back and change the direction value to say to left.

So now, when we take a look at it again, we can see how

our gradient starts on the right and ends on the left side of our header.

And if we want more control over the gradient direction,

we can also define angle values using degree units.

Now, the angle parameters rotate clockwise, so if we type the angle value

0deg for zero degrees, when we save our style sheet and refresh the page,

notice how this creates a gradient starting from the bottom to the top.

It's the same as the to top value we used earlier.

So, as the angle direction increases,

it then continues rotating clockwise unless we define a negative value.

So, for instance, if we change the angle value from zero degrees to 45 degrees,

when we refresh the browser, notice how the gradient moves 45 degrees clockwise.

So now it starts at the bottom left corner and ends at the top right corner.

And if we go back and change the degree value to 90 degrees,

when we save our style sheet and take a look at it once again,

this creates a gradient that starts on the left and ends on the right, and so forth.

So, the second type of gradient we can create is a radial gradient.

Radial gradients are like linear gradients that start from a center point and

smoothly spread outward in a circular or

elliptical shape based on the parameters we set.

And like linear gradients, we can create a basic radial gradient with two or

more color values, and the syntax is also very similar to linear gradients.

So, if we go back to our gradient declaration and

we change our gradient from linear to radial, and

let's remove the decree value and just keep the two color values,

when we save our style sheet and refresh the browser,

we get a rice radial-shaped gradient that's centered in our header.

It fills it entirely to each of the corners.

So, by default, the radial gradient shape is in the shape of an ellipse, but

we can change that.

So, to give the gradient a more circular shape,

we'll need to add the circle keyword before the list of colors.

So right before the first color value,

I'm going to type the keyword circle followed by a comma.

So now when we save our style sheet and take a look at our header once again,

you can see how the gradient is a little more evenly spread out as a circle.

And we'd really be able to see a more defined circle or

shape if the header wasn't as tall.

So, for example, let's go back and change the main headers' height to 450.

So we'll save this and refresh, and now we're able to

see more circular gradient shape compared to the default elliptical shape.

I'll go ahead and remove the circle value so we can see the difference.

Finally, we're also able to change the radial gradient's

position using the at keyword.

So, let's go back and add the circle shape value.

Then right after that, we're going to write at top followed by a comma.

And notice how there's no comma between the circle value and the word top.

They should all be defined before the first comma.

So, before we take a look at what this looks like,

let's go back to the height declaration and change the value back to 850 pixels so

we can get that fuller header height we want.

So, let's save our style sheet, and when we refresh the page, notice how the at

top position value positions the gradient in the top center area of our header.

Now, if we only use one position value,

the second value will default to center, but we can still use two position values.

For example, let's make the position at top right.

And when we save and take a look at it again, we can see how this positions

the origin of the radial gradient at the top right corner of our main header.

So up next, we're gonna learn how to add color stops to our gradients.

Then we'll finish up by adding a nice transparent gradient over the main

header background image.