The gradient is a special type of image that consists of a progressive transition between two or more colors.

Gradients are available in two styles:

• Linear Gradients - down / up / left / right / diagonally

Linear gradients are used to arrange two or more colors in linear formats like top to bottom.

The `linear-gradient()` function sets a linear gradient as the background image of an element.

Syntax:

Using background property:

`background: linear-gradient(direction, color-stop, color-stop, ...);`

You can also use background-image property to set gradients:

`background-image: linear-gradient(direction, color-stop, color-stop, ...);`

### Linear Gradient - Top to Bottom

The following example shows a linear gradient from top to bottom (This is default):

### Linear Gradient - Left to Right

The following example shows a linear gradient from left to right:

You can also create a gradient diagonally by specifying both the horizontal and vertical starting positions.

The following example shows a linear gradient that starts at top left and goes to bottom right:

### Using Angles

You can also define direction using an angle, instead of the predefined directions (to bottom, to top, to right, to left, to bottom right, etc). The angle is specified as an angle between a horizontal line and the gradient line.

The following example shows how to use angles on linear gradients:

### Using Multiple Color Stops

The following example shows how to create a linear gradient with multiple color stops:

The `repeating-linear-gradient()` function is used to repeat linear gradients.

In a radial gradient color emerge from a single point and smoothly spread outward in a circular or elliptical shape.

The `radial-gradient()` function sets a radial gradient as the background image of an element.

Syntax:
`background: radial-gradient(shape size at position, color-stop, color-stop, ...);`

The following example shows a radial gradient with evenly spaced color stops (This is default):

The following example shows a radial gradient with differently spaced color stops:

### Set Shape

The shape parameter specifies the shape of the gradient's ending shape. It can be circle or ellipse. The default value is ellipse.

The following example shows a radial gradient with the shape of a circle:

### Use of Different Size Keywords

The size parameter defines the size of the gradient. It can take four values:

• closest-side
• farthest-side
• closest-corner
• farthest-corner

The `repeating-radial-gradient()` function is used to repeat radial gradients.