CSS Gradient

In addition to setting a background color or a background image, CSS offers a third way to set a background, and that is the gradient. A gradient is a gradual color change that transitions from one color to another. Before CSS3, the only way to achieve this was with a background image. Nowadays this can be done via CSS. CSS gradient is advantageous to using a background image due to better performance, as the background is drawn by the browser and there is no image file to download over the network.

There are two types of gradients:

• Linear gradient: the background color fades from one to the other in a linear fashion–this can be vertically, horizontally, or at an angle.
• Radial gradient: the background color fades from one to the other in a circular or elliptical fashion.

Since gradients are related to the background, the syntax for specifying gradients contains the term background, as shown below:

Linear Gradient Syntax

background: linear-gradient(<arguments>); OR background-image: linear-gradient(<arguments>);

Radial Gradient Syntax

background: radial-gradient(<arguments>); OR background-image: radial-gradient(<arguments>);

<arguments> are variables that specify what the gradient would exactly look like. The details are covered in the linear-gradient property and radial-gradient property sections.

So what do linear gradient background and radial gradient background look like? Below are some examples.

Linear Gradient Example

CSS Declaration

background: linear-gradient (red,yellow);

Result:

Radial Gradient Example

CSS Declaration

background: radial-gradient (red,yellow);

Result: