CSS Gradient

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

Types of the CSS gradient:
  • linear-gradient

  • radial-gradient

  • repeating-linear-gradient

  • repeating-radial-gradient

  • conic-gradient

 

Linear Gradient:

Ex. 1

HTML Code:

<div class="linear-gradient">Linear gradient</div>

CSS Code:

div {

  width: 240px;

  height: 80px;

}.linear-gradient {

  background: linear-gradient(to right,

      red, orange, yellow, green, blue, indigo, violet);

}

Radial gradient:

Ex. 2 

HTML Code:

<div class="radial-gradient">Radial gradient</div>

CSS code:

div {

  width: 240px;

  height: 80px;

}.radial-gradient {

  background: radial-gradient(red, yellow, rgb(30, 144, 255));

}

Powered  by Codersarts