.linear-grad
{
  background:linear-gradient(navy,skyblue,honeydew);
  height:200px;
  width:200px;
  margin:10px
}
.linear-grad-2
{
  background:linear-gradient(to right, navy, skyblue,honeydew);
  height:200px;
  width:200px;
  margin:10px;
}
.linear-grad-3
{
  background: linear-gradient(to bottom right, navy,skyblue,honeydew);
  height:200px;
  width:200px;
  margin:10px;
}
.radial-grad
{
  background:radial-gradient(navy,skyblue,honeydew);
  height:200px;
  width:200px;
  margin:10px;
}
.radial-grad-2
{
  background:radial-gradient(circle at top right, navy,skyblue,honeydew);
 
  height:200px;
  width:200px;
  margin:10px;
}
.radial-grad-3
{
  background:radial-gradient(ellipse at left,navy,skyblue,honeydew);
  height:200px;
  width:200px;
  margin:10px;
}