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:
Since gradients are related to the background, the syntax for specifying gradients contains the term background, as shown below:
Linear Gradient Syntax
Radial Gradient Syntax
So what do linear gradient background and radial gradient background look like? Below are some examples.
Linear Gradient Example
Radial Gradient Example