Professional CSS3

Gradients in CSS

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

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 ...