CSS Gradients

CSS gradients let you display smooth transitions between two or more specified colors.

There are two type for use Gradient:

Linear Gradients

The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient> data type, which is a special kind of <image>.

p {
    background: linear-gradient(blue, yellow);
}

Linear Gradiant

p{
  background: linear-gradient(to left, red, yellow, green,blue);
}

Linear Gradiant

p{
  background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%)
}

Linear Gradiant

Radial Gradients

The radial-gradient() CSS function creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its shape may be a circle or an ellipse. The function’s result is an object of the <gradient> data type, which is a special kind of <image>.

p{
  background: radial-gradient(yellow, green);
}

Radial Gradiant

p{
  background: radial-gradient(closest-side, red, green, yellow);
}

Radial Gradiant

p{   
    background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);
}

Radial Gradiant

p{  
   background: radial-gradient(ellipse at top, #e66465, transparent),
   radial-gradient(ellipse at bottom, #4d9f0c, transparent);
}

Radial Gradiant