#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, red, yellow); /* Standard syntax (must be last) */
}

Linear Gradient – Diagonal

This linear gradient starts at top left. It starts red, transitioning to yellow:

Note: Internet Explorer 9 and earlier versions do not support gradients.