// No direction specified (the following example demonstrates a linear gradient from the head, starting with red, moving to yellow, and then to blue :))
#grad {
background-image: linear-gradient(red, yellow, blue);
}
//specify the direction (without specifying the direction is from top to bottom, specifying the direction 0 degrees is from bottom to top, 90 degrees is from right to left)
#grad1 {
height: 100px;
background-color: red; /* Displayed when not supported by the browser */
background-image: linear-gradient(0deg, red, yellow);
}
#grad2 {
height: 100px;
background-color: red; /* Displayed when not supported by the browser */
background-image: linear-gradient(90deg, red, yellow);
}
#grad3 {
height: 100px;
background-color: red; /* Displayed when not supported by the browser */
background-image: linear-gradient(180deg, red, yellow);
}
#grad4 {
height: 100px;
background-color: red; /* Displayed when not supported by the browser */
background-image: linear-gradient(-90deg, red, yellow);
}
