Color Gradients

In CSS, a gradient is a transition between two or more colors. There are two types of gradients: linear gradients and radial gradients.

A linear gradient is a transition between two or more colors in a linear direction. It is created using the linear-gradient function, which takes a list of colors and a direction as arguments. The direction is specified using an angle or one of the predefined keywords to top, to bottom, to left, or to right.

For example, the following CSS rule creates a linear gradient that transitions from red to blue in a top-to-bottom direction:

Multiple colors can be specified in a linear gradient, where the transition will occur between each pair of adjacent colors. For example, the following CSS rule creates a linear gradient that transitions from red to yellow to green in a top-to-bottom direction:

Moving on to the next type of gradient available, the radial-gradient allows us to create gradients that emerge circularly or radially.

It is a transition between two or more colors in a circular direction. It is created using the radial-gradient function, which takes in a list of colors, a shape, and a size as arguments. The shape can be either a circle or an ellipse, and the size can be specified using one of the predefined keywords closest-side, farthest-side, closest-corner, or farthest-corner.

For example, the following CSS rule creates a radial gradient that transitions from red to blue in a circular direction, with a shape of a circle and a size of farthest-corner:

Multiple colors can be specified in a radial gradient, in which case the transition will occur between each pair of adjacent colors. For example, the following CSS rule creates a radial gradient that transitions from red to yellow to green in a circular direction, with a shape of a circle and a size of farthest-corner:

When using CSS, you should know a few nuances in the linear-gradient and radial-gradient functions.

One nuance of the radial-gradient function is that the size of the gradient can be specified in two ways: using the radius value or the extent keyword.

The radius value is a length that determines the size of the gradient. It can be either a fixed length, such as 10px, or a percentage of the element's size, such as 50%.

The extent keyword is used to specify the gradient's size relative to the gradient's shape. The possible values are closest-side, farthest-side, closest-corner, and farthest-corner. These keywords determine the size of the gradient based on the distance from the center of the gradient to the closest or farthest side or corner of the element.

For example, the following CSS rule creates a radial gradient that transitions from red to blue in a circular direction, with a radius of 50% of the size of the element: