The Gradient in CSS is a special type of image that is made up of progressive & smooth transition between two or more colors. CSS is the way to add style to various web documents. By using the gradient in CSS, we can create variants styling of images which can help to make an attractive webpage.

Syntax: background-image : linear-gradient(white, green);

The Gradients can be categorized into 2 types :

Linear Gradients : It includes the smooth color transitions to going up, down, left, right, and diagonally. The minimum two-color required to create a linear gradient. More than two color elements can be possible in linear gradients. The starting point and the direction are needed for the gradient effect.

Syntax: background-image: linear-gradient(direction, color-stop1, color-stop2, …);

CSS Radial Gradients : A radial gradient differs from a linear gradient. It starts at a single point and emanates outward. By default, the gradient will be elliptical shape, the size will be farthest-corner the first color starts at the center position of the element and then fades to the end color towards the edge of the element. Fade happens at an equal rate until specified.

Syntax: background-image: radial-gradient(shape size at position, start-color, …, last-color);