#grade1{
width:500px;
height:200px;
background:blue;/*to show color if browser doesn't support gradient */
background:linear-gradient(blue, black);/* U can add more colors */
}
// Starts from the right
#grade1{
width:500px;
height:200px;
background:blue;/*to show color if browser doesn't support gradient */
background:linear-gradient(to right, blue, black);/* U can add more colors */
}
// Starts from the bottom right
#grade1{
width:500px;
height:200px;
background:blue;/*to show color if browser doesn't support gradient */
background:linear-gradient(to bottom right, blue, black);/* U can add more colors */
}
// Radial gradient
#grade1{
width:500px;
height:200px;
background:blue;/*to show color if browser doesn't support gradient */
background:radial-gradient(blue, black, white);/* U can add more colors */
}
#grade2{
width:500px;
height:200px;
background:blue;/*to show color if browser doesn't support gradient */
background:repeating-radial-gradient(circle, blue 5%, black 15%, white 60%);/* U can add more colors */
}