Experienced frontend developers remember the time when gradients were done as background images. Yes! That was the only idea to imitate gradients in browsers. You needed to cut 1px width and the gradient's height (if it was a vertical gradient; in the case of horizontal, it was 1px height and width was designated by the width of the gradient) from the PSD file. Then, you had to add it in CSS and repeat your magic image in the background.
Now, you can do it in CSS! Let's begin with linear gradients.
Linear gradients can be of two types: from top-to-bottom or from left-to-right. Let's begin with a vertical gradient:
background: linear-gradient(to bottom, #000 0%, #f00 100%)
This code will generate a linear gradient from top-to-bottom. At the top, the color will be black and it will be red at the bottom.
However, it cannot be so easy to be a frontend developer. That's why you need to remember about prefixes:
background: -webkit-gradient(linear, left top, left bottom...