Creating Amazing Multicolor Linear Gradients with CSS 3

A CSS gradient is an image that smoothly fades from one color to another. These are commonly used for subtle shading in background images, buttons, and many other things.

CSS gradients not only complement the image but also gives an eye-catching user experience to readers.

The color of a linear gradient at any point is determined by finding the unique line passing through that point that is perpendicular to the gradient line. The point’s color is the color of the gradient line at the point where this line intersects it.

There are multiple types of gradients we can create. In CSS, gradients can be in the form of linear, radial/circular shapes.

Here is a syntax for linear gradient:

linear-gradient() = linear-gradient(
  [ <angle> | to <side-or-corner> ]? ,
  <color-stop-list>
)
<side-or-corner> = [left | right] || [top | bottom]

Sample:

You can specify a basic vertical gradient:

linear-gradient(red, green);
linear-gradient(to bottom, red, green);
linear-gradient(180deg, red, green);
linear-gradient(to top, red, green);
linear-gradient(to bottom, red 0%, green 100%);

References:

CSS 3 Images Module Level 3