Create a linear gradient - CSS Tutorial

- [Instructor] In this chapter, you will learn how to enhance your web page backgrounds with color gradients. This first video will focus on creating what are known as linear gradients. A color gradient is a background in which one color gradually blends into another. In this background, we have red, which gradually blends into yellow, and then into blue. Because this blending occurs along a straight line, it's called a linear gradient. Linear gradients are defined in CSS using the linear gradient function in which all the colors are listed in a comma separated list with the first color, red in this case, being displayed first, the second color, yellow, being displayed next, and the third color, blue, being displayed last. Now, we have only three colors in this gradient, but we can add as many colors as we wish, and we're not limited to solid colors either. For example, we can use transparent colors, such as this gradient, in which a solid red blends into a completely transparent red. Let's use a linear gradient function as part of this element's background. This is a page containing the text of a Shakespearian sonnet. And let's say we wanted to change the background from a solid blue to something more resembling a sunset. So let's go to the style rule for this background and replace the blue layer with a linear gradient function consisting of the color black followed by a medium blue, and then a shade of purple, followed by orange, and then ending with yellow, and notice that each of the colors has to be separated by commas, or else the function will not work. Let's save our changes and examine how they affect the background of the Shakespeare page. And now, from the top, we go from black to blue through purple, orange, and ending with yellow. The default direction of a linear gradient function is to go from the top down, but we can change that direction by entering a keyword that specifies where the gradient should point. For example, entering the value to top right points the gradient towards the top-right corner of the element, or using the keyword left points the gradient towards the left edge of the element. We can also use angles for the direction of the gradient. An angle of zero degrees points the gradient straight up, while an angle of around 244 degrees points the gradient down and to the left, and so, by changing the angle value, we can point our gradient in any direction, so let's do that for the sunset gradient used in the Shakespeare page. We'll set the direction to 165 degrees, which points the gradient in a direction down and slightly to the right, and now let's see how our page looks. And now the gradient colors point down and slightly to the right. So now you know how to set the direction of your gradient, but we haven't talked about the colors themselves. By default, the colors are evenly spaced along the gradient line, so in this case, the color red is placed at the very top of the line, yellow is placed in the middle, and blue is placed at the very end, and if we add more colors, they too will be evenly spaced. To change the placement of the colors within the gradient, we can add color stops, which define where the color begins. For example, rather than having yellow in the middle of the gradient, let's move it up to about 16% along the length of the gradient, very close to red, and let's move blue just a little bit beyond that. Now, you notice, as I move the colors to different locations along the gradient, the shift from one color to another occurs within a tightly compacted space, and I can make that space as small as I wish, so, for example, if I move yellow closer to blue, I'm going to have a gradient in which there's a distinct change from yellow to blue, and if i move red closer to yellow, I now have a very compact gradient that has large areas of solid red and solid blue and a very narrow space for yellow. Let's do that for the sunset gradient in our Shakespeare page. We'll set the color stop for blue to 70%. For purple, we'll set the color stop to 80%. We'll place orange 85% along the line, and finally, we'll place yellow 87% along the gradient line. So what we have here is a gradient that's mostly black with blue, purple, orange, and yellow tightly compacted at the end. Now let's see how it looks. And here's our final result. We have a sky that's mostly black with the sunset colors tightly compressed right near the horizon, just like a regular sunset. That concludes our discussion of linear gradients. In the next video, we'll explore radial gradients in which the colors are blended starting from a central point and moving outward in a circular direction.