Live Code Editor Version 2.0

Gradient 1 RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            div{
                float : left;
                width: 200px;
                height: 100px;
                margin: 10px;
            }
            #div1{
                background : linear-gradient(red, yellow);
            }
            #div2{
                background : linear-gradient(to left, red, yellow);
                background : -moz-linear-gradient(left, red, yellow);
                background : -webkit-linear-gradient(left, red, yellow);
                background : -o-linear-gradient(left, red, yellow);
            }
            #div3{
                background : linear-gradient(to right, red, yellow);
                background : -moz-linear-gradient(right, red, yellow);
                background : -webkit-linear-gradient(right, red, yellow);
                background : -o-linear-gradient(right, red, yellow);
            }
            #div4{
                background : linear-gradient(to bottom left, red, yellow);
                background : -moz-linear-gradient(bottom left, red, yellow);
                background : -webkit-linear-gradient(bottom left, red, yellow);
                background : -o-linear-gradient(bottom left, red, yellow);
            }
        </style>
    </head>
    <body style='width: 500px'>
        <div id='div1'></div>
        <div id='div2'></div>
        <div id='div3'></div>
        <div id='div4'></div>
    </body>
</html>