Others


Others


Gradient Background in CSS


There are two types of gradient in CSS.

  • Linear Gradient
  • Radial Gradient
Linear Gradient 
/*background-image:linear-gradient(angle,color1,color2,color3)*/
background-image:linear-gradient(90deg,red,orange);
Radial Gradient 
/*background-image:radial-gradient(circle at position,start-color, ..., last-color);*/
background-image:radial-gradient(closest-side,red,orange,yellow);
Example : index.html 
<html>
  <head>
    <title>Gradient Background Color in CSS</title>
    <style>
      #box1{
        height:80px;
        width:100%;
        /*background-image:linear-gradient(angle,color1,color2,color3)*/
        background-image:linear-gradient(90deg,red,orange);
      }
      #box2{
        height:80px;
        width:100%;
        /*background-image:linear-gradient(angle,color1,color2,color3)*/
        background-image:linear-gradient(90deg,red,orange,yellow);
      }
      #box3{
        height:80px;
        width:100%;
        /*background-image:radial-gradient(circle at position,start-color, ..., last-color);*/
        background-image:radial-gradient(closest-side,red,orange,yellow);
      }
    </style>
  </head>
  <body>
    <h3>Linear Gradient <small>(Two color)</small></h3>
    <div id='box1'></div>
    
    <h3>Linear Gradient <small>(Three Color)</small></h3>
    <div id='box2'></div>
    
    <h3>Radial Gradient</h3>
    <div id='box3'></div>
  </body>
</html>
Try it Yourself

Live Demo