CSS gradients let you display smooth transitions between two or more specified colors.

CSS defines two types of gradients:

• Linear Gradients (goes down/up/left/right/diagonally)
• Radial Gradients (defined by their center)

CSS Linear Gradients

To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

Syntax

background-object: linear-gradient(direction, color-stop1, color-stop2, ...);

directions: to top, to bottom (default), to left, to right, to bottom right, to top left, etc.

Using Angles

If you want more control over the direction of the gradient, you can define an angle, instead of the predefined directions (to bottom, to top, to right, to left, to bottom right, etc.).

Syntax

background-object: linear-gradient(angle, color-stop1, color-stop2);

The angle is specified as an angle between a horizontal line and the gradient line.

Using Multiple Color Stops

background-object: linear-gradient(color-stop1, color-stop2, color-stop3);

CSS Radial Gradients

A radial gradient is defined by its center.

To create a radial gradient you must also define at least two color stops.